Jquery - 验证多个字段(分组字段)，其中所有字段都有效

Question

我一直致力于以通用方式验证多个字段。我的表单有一个父范围，其中有两个文本字段，当一个或两个文本字段验证失败时，该范围应使用错误类突出显示，在我的情况下，两个文本字段周围有一个红色框，当两个字段都有效时，该范围应不突出显示。但实际行为是，如果第一个文本框被赋予有效值，则 jquery 高亮/取消突出显示函数将删除两个字段周围的 errorClass/redbox，即使第二个字段的 required/regex 验证尚未通过。我编写了一个自定义方法，并为两个 texboxes 添加了额外的验证规则，对 tesboxes 进行了分组，但没有一个起作用，我实际上是 jquery 的新手，无法从我现在的位置继续，所以任何帮助都是高度赞赏。

这里是示例代码

setUpValidations:函数(){

    $.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 -->

Answer 1

在取消突出显示功能中，您必须在从容器中删除错误类之前检查同一容器中的所有其他字段是否有效。类似的东西

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

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

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

$(element).closest('span').addClass('error');
$(element).closest('span').removeClass('error');