2

我目前正在使用 JQuery Validate 插件和一些提示插件来验证表单。我还需要验证电子邮件地址，然后检查所有字段是否已填写。我熟悉 Validaterules功能，但是它会导致问题。

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

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

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

我的表单验证

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

我的电子邮件验证：

    $('.email-field').change(function(){
            var email = $(this).val();

            var re = /^(([^<>()[\]\\.,;:\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,}))$/;

            if(re.test(email)) {
                document.getElementById('result').innerHTML = '<span style="color:green; font-style:italic; font-weight:normal;"><img src="http://myhousesforsaleindetroit.com/wp-content/uploads/2012/08/green-check-mark.png"> valid';
            } else {
                document.getElementById('result').innerHTML = '<img src="http://upload.wikimedia.org/wikipedia/en/archive/8/89/20070603232424!RedX.png" style="width:15px; margin:-2px 0px 0px 0px;"/> invalid';
            }
        });

我很感激任何建议！

提前谢谢了！

4

2 回答 2

1

我想我没有完全理解你的实现。使用表单验证插件然后用自定义change处理程序绕过它的一部分似乎毫无意义。既然您使用的是 jQuery Validate 插件，为什么不直接使用它的内置email规则呢？

否则，如果您更喜欢您的电子邮件功能，请使用内置addMethod()方法将其转换为自定义规则。

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

});

演示，使用 qTip2 进行 jQuery 验证：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;
},

演示，使用 Tooltipster 进行 jQuery 验证：http: //jsfiddle.net/kyK4G/

于 2013-04-07T22:52:49.620 回答
0

问题是由于我$('.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'
                   ...
                   ...
                   ...
于 2013-04-12T13:36:31.993 回答