Question

如果输入的数据无效，JavaScript正在运行并且看到每个字段无效但仍在发送数据并重定向用户，而不是将其保留在该页面上，我正在尝试停止发送表单。< / p>

//test to see informtion is valid
$('form[name="input"]').submit(function(event){
    alert('user has submitted the form....');
    var vaild = true;
    $('form input').each(function(){
        var data = $(this).val();
        console.log(data);
        if(!$(this).hasClass('valid'))valid = false;
        console.log($(this).hasClass('valid'));
    });
    console.log('valid:'+valid);
    if(vaild) return true;
    return false;

    }); 

<form name="input" method="post" action="regprocess.php"> <!--here after the form is submitted it is directed to the check page-->
   <ol> 
          <div align="center">
            <table width="400" border="1">
              <tr>

                <td><li><label for="fname">First Name (Max Lenght 15)</label></li></td>
                <td><input class="text" type="text" name="fname" /></li></td>

              </tr>
              <tr>
                <td><li><label for="lname">Last Name (Max Lenght 15)</label></li></td>
                <td><input class="text" type="text" name="lname"/></li></td>
              </tr>
              <tr>
                <td><li><label for="dob">DOB</label></li></td>
                <td><input class="date" id="datepicker" type="text" name="dob"/></li></td>
              </tr>
              <tr>
                <td><li><label for="email">Email:</label></li></td>
                <td><input class="email" type="email" name="email"/></li></td>
              </tr>
              <tr>
                <td height="23"><li><label for="username">Username: (Max Length 10)</label></li></td>
                <td><input class="un" type="text" name="username"/></li></td>
              </tr>
              <tr>
                <td><li><label for="password">Password:</label></li></td>
                <td><input class="password" type="password" name="password"/></li></td>
              </tr>
              <tr>
                <td><li><label for="password2">Confirm Password:</label></li></td>
                <td><input class="password" type="password" name="password2"/></li></td>
              </tr>
              <td>&nbsp;</td>
                <td><input class="button" type="submit" name="submit" value="submit"/></td>
            </table>

Answer 1

您有拼写错误： vaild应为valid。

您在这里定义（拼写错误的）变量：

var vaild = true;

但是你在这里更新一个不同的，以前未申报的（但拼写正确的！）：

if(!$(this).hasClass('valid'))valid = false;

因此，您的vaild变量始终为true，并且您正在使用该变量返回true / false（因此始终允许表单提交）。

我在这里做了修复（省略了调试代码并添加了一些建议）：

$('form[name="input"]').submit(function(event) {
    var valid = true;
    $('form input').each(function() {
        if (!$(this).hasClass('valid')) {
            valid = false;
            return false; // break out of the for-loop
        }
    });
    return valid; // simply return the variable
});

即使JavaScript正在提取无效数据，表单仍在提交

1 个答案: