表单验证

Question

我正在为我的计算机研究班制作一个网站。我做了一个表单，在提交时，将信息输入到一个句子中，替换默认单词。它使用“getElementByID”工作正常，但当我尝试使用javascript验证它时，页面在我提交时保持刷新。它不会让你提交空盒子，但我提交信息时无法阻止它刷新。这是我的HTML：

<form method="post" style="padding: 0px 15px;">
What is your name?<br>
<input type='text' name="Name" id='userName' placeholder="Name" required><br><br>
How old are you?<br>
<input type='text' name="Age" id='userAge' placeholder="Age" required><br><br>

<input type="submit" onsubmit="getInfo()" value='Submit Information'/><br><br></form>

<p style="text-indent: 50px;">Welcome to the site <b id='Name'> friend</b>. You're <b id='Age'> 47</b> years old right?<br><br></p>

这是我的javascript：

function getInfo(){
    var userName = document.getElementById('userName').value;
    document.getElementById('Name').innerHTML = userName;

    var userAge = document.getElementById('userAge').value;
    document.getElementById('Age').innerHTML = userAge;

}


$("input[type='button']").click(function(e) {


});

请帮我阻止它刷新

Answer 1

1）从输入类型提交中删除on submit inline事件（使用此更新，它将无法运行，但代码将更清晰）。

2）更改输入类型的jquery选择器＆＃39;提交＆＃39;因为你没有输入类型按钮。

3）e.preventDefault（）避免事件的默认行为。添加它。

4）在点击事件

上执行getInfo

$("input[type='submit']").on('click', function(e) {
    e.preventDefault();
    getInfo();
});

另一种方法是将输入类型更改为按钮，因此，您只需要关注步骤1和步骤4;

$("input[type='button']").on('click', function(e) {
    getInfo();
});

为了获取html5验证的冒险（如需要的输入），一旦在表单的submit事件中执行了验证，就可以停止表单提交：

$('#form').on('submit', function(e) {
    e.preventDefault();
    getInfo();
});

试一试： Fiddle

＆＃13;

＆＃13;

function getInfo(){
    var userName = document.getElementById('userName').value;
    console.log(document.getElementById('Name').innerHTML = userName);

    var userAge = document.getElementById('userAge').value;
    console.log(document.getElementById('Age').innerHTML = userAge);
    
}


$('#form').on('submit', function(e) {
    e.preventDefault();
    getInfo();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<form id='form' method="post" style="padding: 0px 15px;">
What is your name?<br>
<input type='text' name="Name" id='userName' placeholder="Name" required><br><br>
How old are you?<br>
<input type='text' name="Age" id='userAge' placeholder="Age" required><br><br>

<input type="submit" value='Submit Information'/><br><br></form>

<p style="text-indent: 50px;">Welcome to the site <b id='Name'> friend</b>. You're <b id='Age'> 47</b> years old right?<br><br></p>

＆＃13;

＆＃13;

＆＃13;