Question

我有一个html表单和一些验证表单的jQuery。如果所有验证都通过，我想提交表格。当我按提交时，出现错误消息（如果有错误），但是，当没有错误消息时，提交按钮会出现停顿并且出现错误

无响应的脚本错误

我在firefox和safari中得到了相同的结果。

jQuery（错误div是出现所有错误的地方）：

$("#joinForm").on("submit", function (e) {
        e.preventDefault();

        if (!$(':text').val() || !$(':password').val()){

            $('#fillIn').remove();
            $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
        }
        else {
            $('#fillIn').remove();
        }


        if ($('#email').val()!= $('#reemail').val()){
            $('#noMatch').remove();
            $('#errors').append("<p id='noMatch'>Emails do not match</p>");
        }
        else{
            $('#noMatch').remove();
        }


        if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
            $('#joinForm').submit();
        }
        else{
            $('#errorModal').modal('show');
        }

    });

});

HTML：

<form method='POST' action='join_action.php' id='joinForm'>
    <table>
        <tr>
            <td>Full Name: </td><td><input type='text' name='name'></input></td>
        </tr>
        <tr>
            <td>Email: </td><td><input type='text' name='email' id='email'></input></td>
        </tr>
        <tr>
            <td>Re-type Email: </td><td><input type='text' name='reemail' id='reemail'></input></td>
        </tr>
        <tr>
            <td>New Password: </td><td><input type='password' name='password'></input></td>
        </tr>
        <tr>
            <td><input type='submit' value='Sign Up' name='signup' id='signup'></td>
        </tr>
    </table>
</form>

Answer 1

e.preventDefault();阻止表单提交，然后您手动调用submit()，这将触发另一个submit事件，因此您获得了无限循环。

要解决此问题，请仅在表单无效时调用preventDefault。

$("#joinForm").on("submit", function (e) {
        var isValid = true;

        if (!$(':text').val() || !$(':password').val()){
            isValid = false;
            $('#fillIn').remove();
            $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
        }
        else {
            $('#fillIn').remove();
        }


        if ($('#email').val()!= $('#reemail').val()){
            isValid = false;
            $('#noMatch').remove();
            $('#errors').append("<p id='noMatch'>Emails do not match</p>");
        }
        else{
            $('#noMatch').remove();
        }


        if (isValid && $('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
           // pass
        }
        else{
            $('#errorModal').modal('show');
            e.preventDefault();
        }

    });

});

Answer 2

将您的最后一句if语句切换为：

    if (!($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val())){
        $('#errorModal').modal('show');
        e.preventDefault();
    }

同时从代码顶部删除e.preventDefault()。

这只是改变了逻辑，说“如果我们有错误，请显示模态并停止提交。否则，继续提交”

Answer 3

只有在出现错误时才应使用e.preventDefault();。最简单的方法是，声明一个标志，并在出现错误时将其设置为true并执行类似的操作，

$("#joinForm").on("submit", function (e) { 
   var isError = false; // set the flag to false initially 

 // do whatever you want.

  if(error conditions)
   isError = true;  /// do this wherever you are expecting error

  // do something else        

  if(isError)  
      e.preventDefault();
});

Answer 4

试试这个：

$('#joinForm').submit(function(){

    if (!$(':text').val() || !$(':password').val()){

        $('#fillIn').remove();
        $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
    }
    else {
        $('#fillIn').remove();
    }


    if ($('#email').val()!= $('#reemail').val()){
        $('#noMatch').remove();
        $('#errors').append("<p id='noMatch'>Emails do not match</p>");
    }
    else{
        $('#noMatch').remove();
    }


    if ($('#email').val() == $('#reemail').val() && $(':text').val() && $(':password').val()){
        $('#joinForm').submit();
    }
    else{
        $('#errorModal').modal('show');
    }

    return false;
});

最终看到了

返回false;

再见！

Answer 5

1.7.1 jQuery上的工作代码：

    $(function() {
        $("#joinForm").on("submit", function () {
            var validForm = true;
            if (!$(':text').val() || !$(':password').val()){

                $('#fillIn').remove();
                $('#errors').append("<p id='fillIn'>Please fill in all fields</p>");
                validForm = false;
            }
            else {
                $('#fillIn').remove();
            }


            if ($('#email').val()!= $('#reemail').val()){
                $('#noMatch').remove();
                $('#errors').append("<p id='noMatch'>Emails do not match</p>");
                validForm = false;
            }
            else{
                $('#noMatch').remove();
            }


            if (validForm){
                $(this).submit();
            }
            else{
                $('#errorModal').modal('show');
            }
        return false; 
    });
  });

当没有错误存在时，jQuery表单不提交

5 个答案: