Question

我为jquery构建了这个插件，它在bootstrap样式表单上形成了验证。当我在开发的另一天使用它时，我发现了一个错误，当我在同一页面上的两个表单上。当我尝试提交其中一个表单时，验证程序脚本将验证两个表单，并且由于空表单中发生错误都不会提交。所以我想弄清楚为什么这是

工作原理

$.validator();是插件。它包含一系列选项，可在此处找到文档http://jsfiddle.net/0991m63f/。初始化插件时，它会为每种输入类型初始化keyup，change，select和click功能，验证程序将随时验证。

$.validator.check()是用户在您尝试提交表单时所要求的返回值。此方法返回一个布尔值，仅此而已。

我对此的思考过程是因为验证器附加到两个单独的表单上，它不应该只检查它在初始化时附加的那些表单吗？我认为这是真的，因为我做的事情是：

$('#form').submit(function(e){
    e.preventDefault();
    if($(this).validator.chek()){
        //do stuff here
    }
});

然后因为它是通过引用附加对象传递的，并且所述对象是活动元素，那么另一种形式（这个非活动对象）根本不应该触发，对吗？这是我的困惑点。

我在做什么

的javascript

 $('#signupform').validator({
    notEmpty : ['#email_address', '#password', '#first_name', '#date_of_birth'],
    isDateTime : ['#date_of_birth'],
    isEmail : ['#email_address'],
    validPassword : ['#password'],

});
// submitting the sign-up form
$('#signupform').on('click', '.btn-primary', function(e){
    e.preventDefault();
    $('body').spin('large');
    if($('#signupform').validator.check()){
        var data = {
            callback : 'registerUser',
            parameters : {
                email_address : $('#email_address', this).val(),
                password : $('#password', this).val(),
                first_name : $('#first_name', this).val(),
                date_of_birth : $('#date_of_birth', this).val()
            }
        };
        $.ajax({
            url : "$APP_BASE/assets/server/callbacks.php",
            type : 'POST',
            data : data,
            dataType : "JSON",
            success : function(response){
                $('body').spin(false);
                if(!response.errors){
                    bootbox.alert(response.success_message);
                    $('#signupform')[0].reset();
                }else{
                    bootbox.alert(response.error_message);
                }
            }
        });
    }else{
        $('body').spin(false);
    }
});

// validating the signin form
$('#signinform').validator({
    notEmpty : ['#signin_email_address', '#signin_password'],
    isEmail : ['#signin_email_address']
});

// submitting the sign-in form
$('#signinform').on('click', '.btn-primary', function(e){
    e.preventDefault();
    if($('#signinform').validator.check()){
        alert('good');
    }else{
        alert('bad');
    }
});

HTML 的

<section class='col-md-8'>
    <div class='row'>
        <article class='col-md-5'>
            <h4>Already a member? Sign-in!</h4>
            <div class='row'>
                <form id='signinform' action='' method='post'>
                    <article class='form-group col-xs-12'>
                        <input type='text' id='signin_email_address' class='form-control' placeholder='E-Mail Address' />
                    </article>
                    <article class='form-group col-xs-12'>
                        <input type='password' id='signin_password' class='form-control' placeholder='password' />
                    </article>
                    <article class='form-group col-xs-12'>
                        <button type='submit' form='signinform' class='btn btn-primary'>Sign-in</button>
                    </article>
                </form>
            </div>
        </article>
        <article class='col-md-2' style='margin-top:50px'>
            <h4 class='text-center'> - or - </h4>
        </article>
        <article class='col-md-5'>
            <h4>Sign-Up for free, today!</h4>
            <div class='row'>
                <form id='signupform' action='' method='post'>
                    <article class='form-group col-xs-12'>
                        <input type='text' id='email_address' class='form-control' placeholder='E-Mail Address' />
                    </article>
                    <article class='form-group col-xs-12'>
                        <input type='password' id='password' class='form-control' placeholder='Password' />
                    </article>
                    <article class='form-group col-xs-12'>
                        <input type='text' id='first_name' class='form-control' placeholder='First Name' />
                    </article>
                    <article class='form-group col-xs-12'>
                        <input type='text' id='date_of_birth' class='form-control' placeholder='Date of Birth' />
                    </article>
                    <article class='form-group col-xs-12'>
                        <button type='submit' form='signupform' class='btn btn-primary'>Sign-Up</button>
                    </article>
                </form>
            </div>
        </article>
    </div>
</section>

摘要

这是一个工作演示，其中包含插件代码和上面示例中的代码，显示有问题的错误是重复的

Query String

总结一下嗯，我在这里的所有内容都是为什么两个表格一次提交以及如何修复它的解决方案。我已经绞尽脑汁待了很长时间而且我迷失了。提前谢谢你！

验证插件一次处理两个表单，错误

0 个答案: