验证输入后提交表单

罗伊纳斯尔

我有以下注册表：

<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 调用。

代码 Lღver

您必须在 ajax 调用之前放置条件。您必须使用valid()jquery 验证功能检查表单验证。

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

$('#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
}

参考链接。

并使debug: true,.

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。