javascript - 验证插件同时处理两个表单，错误

Question

我为 jquery 构建了这个插件，可以对引导样式的表单进行表单验证。前几天我在开发中使用它时，当我将它放在同一页面上的两个表单上时，我发现了一个错误。当我尝试提交其中一个表单时，验证器脚本将验证这两个表单，并且由于空表单中发生错误，因此两个表单都不会提交。所以我试图弄清楚为什么会这样

工作原理

$.validator(); 是插件。它采用一系列选项，可以在此处找到其文档，https://github.com/MarkHill89/validator 。当插件初始化时，它会初始化每种输入类型的 keyup、change、select 和 click 功能。验证器将在您进行时进行验证。

$.validator.check() 是您尝试提交表单时用户调用的返回值。此方法返回一个 bool 值，仅此而已。

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

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

摘要

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

http://jsfiddle.net/0991m63f/

总而言之，我在这里所追求的就是解决为什么两个表单同时提交以及如何修复它的问题。我已经为此绞尽脑汁有一段时间了，但我迷失了。提前谢谢你!

Answer 1

问题出在你的函数$.fn.validator.check

由于您有 validator.check，因此您将在验证器之上调用检查函数。

对于this将等于function $.fn.validator()，这是您发送给Validator()的内容

建议的更改包括:

将函数更改为 $.fn.validatorCheck()

或

$.fn.validator.check = function(context){
    var _data = null;
    var _mode = "check";
    var _Validator = new Validator(context, _mode, _data);
    _Validator.init();
    return _Validator.valid;
};
$.fn.validator.check($('#signupform').);