Question

我有以下注册表格：

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"
            }
        }
    });

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

$('#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代码也会运行。这是我点击按钮的代码：

display: none

我想要的是，当我点击提交按钮并且存在验证问题时，按钮点击事件将不会被触发，因此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
});

验证输入后提交表单

2 个答案: