Question

我目前正在使用JQuery Validate插件以及一些提示插件来验证表单。我还需要验证电子邮件地址，然后只检查所有字段已填写完毕。我熟悉Validate rules函数，但它会导致问题。

一旦电子邮件评估为无效，使用我当前的实现，所有后续文本字段似乎都无效（通过生成插件提示）并导致所有后续字段都有一个恼人的提示{{1}在用户甚至有机会填写它们之前。

我想知道是否有办法检查我的电子邮件验证函数是否在this field is required调用中返回true，如果它不返回true，则认为表单无效。

稍后我将需要实现一个遵循相同逻辑的密码正则表达式函数。

我的表单验证

validate

我的电子邮件验证：

 $(".form").validate({
            errorPlacement: function(error, element) {
            },
            highlight: function(element, errorClass, validClass) {
                $(element).css('border', '1px solid red');
                $('.addlefttip').qtip({
                    position: {
                        my: 'middle left', 
                        at: 'middle right'
                    },
                    show: {
                        event: 'focus'
                    },
                    hide:{
                       event: 'blur'
                    },
                    style: {
                            classes: 'qtip-blue qtip-shadow'
                        },
                        content: {
                            attr: 'alt'
                        },
                    });
                    $('.addtoptip').qtip({
                        position: {
                            my: 'bottom left', 
                            at: 'top right'
                        },
                        show: {
                            event: 'focus'
                        },
                        hide:{
                            event: 'blur'
                        },
                        style: {
                            classes: 'qtip-blue qtip-shadow'
                        },
                        content: {
                            attr: 'alt'
                        },
                    });
                },
                rules: {
                    email: {
                        minlength: 5
                    }
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).css('border', '1px solid #ddd');
                }
            });

我感谢任何建议！

非常感谢提前！

Answer 1

我想我不完全了解你的实施。使用表单验证插件然后使用自定义change处理程序绕过部分验证插件似乎毫无意义。由于您使用的是jQuery Validate插件，为什么不使用它的built-in email rule？

否则，如果您更喜欢自己的电子邮件功能，请使用built-in addMethod() method将其转换为自定义规则。

$.validator.addMethod("myCustomRule", function(value, element) { 
      return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value); 
}, "Custom message for this rule");

它的执行方式与任何其他规则一样......

rules: {
   myfield: {
       myCustomRule: true
   }
}

至于将qTip2与jQuery Validate一起使用，我就这样做了......

$(document).ready(function () {

    $('#myform').validate({ 
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).filter(':not(.valid)').qtip({
                overwrite: false,
                content: error,
                show: {
                    event: false,
                    ready: true
                },
                hide: false
            }).qtip('option', 'content.text', error);
        },
        success: function (error) {
            setTimeout(function () {
                $('form').find('.valid').qtip('destroy');
            }, 1);
        }
    });

});

DEMO，jQuery使用qTip2验证：http://jsfiddle.net/96AM4/

但是最近，我一直在使用Tooltipster，因为它与jQuery Validate的集成更加清晰。

$(document).ready(function () {

    // initialize Tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: 'right'  // display the tips to the right of the element
    });

    // initialize jQuery Validate
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});

<强>侧面注意：

最好不要将callbcak函数留空，如下所示：

errorPlacement: function(error, element) {
},

如果您打算取消默认错误消息，请使用此选项：

errorPlacement: function(error, element) {
    return false;
},

DEMO，jQuery使用Tooltipster验证：http://jsfiddle.net/kyK4G/

Answer 2

问题是由于我在突出显示定义中选择了$('.addlefttip').qtip({...。将选择器更改为element可解决所述问题。

 highlight: function(element, errorClass, validClass) {
                $(element).css('border', '1px solid red');
                $(element).qtip({
                    position: {
                        my: 'middle left', 
                        at: 'middle right'
                    },
                    show: {
                        event: 'focus'
                   ...
                   ...
                   ...

JQuery使用电子邮件验证验证插件

2 个答案: