3

我一直在努力让多个字段的验证以通用方式工作。我的表单有一个父跨度，它有两个文本字段，当一个或两个文本字段验证失败时，跨度应该用 errorclass 突出显示，在我的情况下，两个文本字段周围有一个红色框，当两个字段都有效时，跨度应该不突出显示. 但实际行为是，如果第一个文本框被赋予一个有效值，则 jquery highlight/unhighlight 函数将删除两个字段周围的 errorClass/redbox，即使第二个字段的必需/正则表达式验证尚未通过。我已经编写了一个自定义方法，并为两个 texboxes 添加了一个额外的验证规则，将 tesboxes 分组，但没有一个有效，我实际上是 jquery 的新手，无法从我现在的位置继续，

示例代码在这里

设置验证：函数（）{

    $.validator.addMethod(
        'regex', function(value, element, param) {
            var regex = new RegExp(param);
            return regex.test(value);
        }, 'Regex failed'
    );

   $.validator.addMethod(
        'validateGroupFields', function(value, element) {
        var spanElement = $(element).closest('span');
        var spanChildren = listChildren(spanElement);
        var result = true;
                   spanChildren.each( function(index, value) {
            //alert("index" + index + "value" + value);
                if((this).valid() == true)
                {   
                    $(this).siblings('div.errorbuble1').hide();
                }else {
                    result = false;
                }
            });
            return result;
        }, 'Group validation failed'
    );

function listChildren(element) {
        var children = $(element).find(':input');
        return children;
    };

    $.validator.setDefaults({

        highlight: function(element) {
            $(element).closest('span').attr('class','error');
        },

        unhighlight: function(element) {
            $(element).closest('span').attr('class','');
        },

        onfocusout: function(element, event) {
            if ( !this.checkable(element) || !this.optional(element)) {
                this.element(element);
                $(element).siblings('div.errorbuble1').hide();
            }
        },

        onfocusin: function(element) {
            if( (element.name in this.submitted) && !$(element).valid()){
                    $(element).siblings('div.errorbuble1').show();
            }
        },

        onclick: function(element, event) {
        // click on selects, radiobuttons and checkboxes
            if(element.type === 'radio' || element.type === 'checkbox'){
                this.element(element);
            }
            else if( (element.name in this.submitted)){ //select
                this.element(element);
            }
        },


    });
},

 onValidate : function () {

    $('#form11').validate({
        errorClass: 'newError',

       submithandler: function(form11){
          (form11).submit();
       },

       invalidHandler: function(form, validator) {
        submitted = true;
        },

       rules : {
               'errorIndicator2:textField3':{
                 required:true,
                 regex : { 
                     param : /^[0-9]+$/
                 },
         validateGroupFields: true
             },
             'errorIndicator2:textField4':{
                 required:true,
                 regex : { 
                     param : /^[a-z]+$/
                 },
              validateGroupFields: true
             },
           },
          groups: {
    nameGroup: "errorIndicator2:textField3
             errorIndicator2:textField4"
        },

           showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            if (submitted) {
                $('div.errorbuble1').hide();
                submitted = false;
            }
        },

           errorElement: "div",
       wrapper: "div", // a wrapper around the error message

       errorPlacement: function(error, element) {

            offset = element.offset();

            error.addClass('errorbuble1');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + (element.outerWidth()) + 5);
            error.css('top', offset.top + (element.outerHeight())/3);   
            error.insertAfter(element);  
       },


           var submitted = false;
       $(document).ready(function(){

JavaScriptValidator.setUpValidations();
JavaScriptValidator.onValidate();

$("[type=submit]").on({
    click: function(event) {
    JavaScriptValidator.onValidate();
    }
    });
});


 <h3>Error box around two fields:</h3> 
<span wicket:id="errorIndicator2"> 
<table>
    <tbody><tr>
    <td>Number:</td><td><input wicket:id="textField3" name="errorIndicator2:textField3" type="text"></td>
    </tr>
    <tr>
    <td>Alpha</td><td><input wicket:id="textField4" name="errorIndicator2:textField4" type="text"></td>
    </tr>
</tbody></table>
<!-- error popup div gets added here -->

4

2 回答 2

1

Calling a validating method like element(), $(...).valid(), or form() inside the highlight callback will result in infinite loop, but you can use the validator instance property 'invalid' which maintains a list of invalid fields. 

$("form").validate({
    highlight: function (element, errorClass, validClass) {
        $(element).closest('div.container').addClass('errorClass');
    },
    unhighlight: function (element, errorClass, validClass) {
        var validator = this, result = true;

        // check for invalid elements here
        $(element).closest('div.container').find(':input').each(function () {
            if (validator.invalid[this.name] !== undefined) {
                result = false;
            }
        });
        if (result) {
            $(element).closest('div.container').removeClass('errorClass')
        }
    }
});

thanks @Adam set me on the right track fiddle here

于 2013-02-14T17:20:42.657 回答
1

在 unhighlight 函数中，您必须在从容器中删除错误类之前检查同一容器中的所有其他字段是否有效。就像是

$('input,select', $(element).closest('span')).not(element)

应该选择同一容器中的所有其他表单元素。但是，您可能会遇到递归问题（我没有尝试过您的情况，但请参阅 require_from_group 方法的disssion）。

此外，您不应通过 attr 方法设置类。该元素可能具有用于其他目的的其他类，您可以在设置/取消设置错误类时删除这些类。改用 jQuery addClass 和 removeClass 函数：

$(element).closest('span').addClass('error');
$(element).closest('span').removeClass('error');
于 2013-02-14T06:24:49.170 回答