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

Validation plugin processing two forms at once, error

本文关键字:两个 错误 表单 一次 插件 验证 处理      更新时间:2023-09-26

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

工作原理

$.validator();为插件。它接受一系列选项,相关文档可以在这里找到,https://github.com/MarkHill89/validator。当插件初始化时,它为每种类型的输入初始化keyupchangeselectclick功能,并且验证器将在您进行验证时进行验证。

$.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');
    }
});

<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/

总而言之,我在这里想要的是一个解决方案,为什么两个表单同时提交,以及如何修复它。我为这件事绞尽脑汁已经有一段时间了,我迷路了。提前谢谢你!

问题出在你的函数$.fn.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').);