验证输入后提交表单

Question

我有以下注册表：

<form id="register-form" method="post" role="form" style="display: none;" 

action="">
    <div class="form-group">
        <input type="text" name="firstname" id="firstname" tabindex="1" class="form-control" placeholder="Firstname" value="" required>
        <span class="error" id="fnError"></span>
    </div>
    <div class="form-group">
        <input type="text" name="lastname" id="lastname" tabindex="1" class="form-control" placeholder="Lastname" value=""required>
        <span class="error" id="lnError"></span>
    </div>
    <div class="form-group">
        <input type="email" name="email2" id="email2" tabindex="1" class="form-control" placeholder="Email Address" value=""required>
    </div>
    <div class="form-group">
        <input type="password" name="password2" id="password2" tabindex="2" class="form-control" placeholder="Password"required>
        <span class="error" id="pass2Error"></span>
    </div>
    <div class="form-group">
        <input type="password" name="confirm_password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password" required>
        <span class="error" id="confError"></span>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
                <span class="throw_error" id="success"></span>
                <div id="divLoader"></div>
            </div>
            <div class="col-sm-6 col-sm-offset-3">
                <span id="result"></span>
            </div>
        </div>
    </div>
</form>

我正在使用 jquery 验证插件来验证输入：

jQuery.validator.setDefaults({
        debug: false,
        success: "valid"
    });
    $('#register-form').validate({
        rules:{
            firstname :{
                required : true,
                minlength : 3,
                maxlength : 15
            },
            lastname :{
                required : true,
                minlength : 3,
                maxlength : 15
            },
            email2:{
                required : true,
                email : true
            },
            password2:{
                required : true,
                minlength : 8,
                maxlength : 15
            },
            confirm_password:{
                required : true,
                minlength : 8,
                maxlength : 15,
                equalTo : "#password2"
            }
        }
    });

当我单击注册按钮时，会显示字段的验证（显示每个字段上的所有错误），并且即使存在验证错误，我在按钮按下时使用的 ajax 代码也会运行。 这是我的按钮点击代码：

$('#register-form').submit(function(event){
    var formData={
        'fn':$('#firstname').val(),
        'ln':$('#lastname').val(),
        'email':$('#email2').val(),
        'pass':$('#password2').val(),
        'action':'regUser'
    };
    $.ajax({
        type: 'POST',
        url: 'Index.php',
        data: formData,
        dataType: 'json',
        beforeSend: function () {
            $('#register-submit').attr("disabled","disabled");
            $("#divLoader").addClass("loader");
            console.log('before send');
        },
        success: function (data) {
            if(data.success){
                $('#success').fadeIn(1000).append('<p>'+data.userAdded+'</p>');
            }
            else{
                $('.throw_error').fadeIn(1000).html(data.errors[0]);
            }
        },
        error: function(){
            alert("System currently unavailable, try again later");
        },
        complete: function () {
            $('#register-submit').removeAttr('disabled');
            $('#divLoader').removeClass('loader');
        }
    });
    event.preventDefault();
});

我想要的是，当我点击提交按钮时出现验证问题，按钮点击事件不会被触发，所以AJAX调用没有启动。

Answer 1

您必须将条件放在 ajax 调用之前。您必须使用 jquery validate 的函数valid() 来检查表单验证。

所以你的代码会是这样的：

$('#register-form').submit(function(event){
var formData={
    'fn':$('#firstname').val(),
    'ln':$('#lastname').val(),
    'email':$('#email2').val(),
    'pass':$('#password2').val(),
    'action':'regUser'
};
if($(this).valid()) {
    //ajax call  will be inside of this if condition
}

参考link。

然后制作debug: true,。

Answer 2

尝试将您的 validator 命名为变量

var myvalidator = $('#register-form').validate({
  // ..
});

并在表单提交中添加这样的检查：

$('#register-form').submit(function(event){ 
  if (! myvalidator.valid() ) event.preventDefault();
  // goes to ajax
});