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

Question

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

工作原理

$.validator(); 是插件。它包含一系列选项，可以在此处找到文档，https://github.com/MarkHill89/validator。初始化插件时，它会为每种类型的输入初始化 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>

总结

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

http://jsfiddle.net/0991m63f/

总而言之，我所追求的只是解决为什么两个表单同时提交，以及如何解决它。我已经为此绞尽脑汁很久了，我迷路了。提前谢谢你！

Answer 1

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

因为你有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').);