3

私は、複数のフィールドの検証を一般的な方法で機能させることに取り組んできました。私のフォームには、2 つのテキストフィールドを持つ親スパンがあります。一方または両方のテキストフィールドが検証に失敗した場合、スパンは errorclass で強調表示される必要があります。私の場合、2 つのテキストフィールドの周りに赤いボックスが表示され、両方のフィールドが有効な場合、スパンは強調表示されません。 . ただし、実際の動作は、最初のテキスト ボックスに有効な値が指定されている場合、2 番目のフィールドの必須/正規表現の検証がまだ渡されていなくても、jquery のハイライト/ハイライト解除関数が 2 つのフィールドの errorClass/redbox を削除することです。カスタム メソッドを作成し、両方の texbox に追加の検証ルールを追加し、tesbox をグループ化しましたが、どれも機能していません。実際には 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 -->

4

2 に答える 2

1

ハイライト コールバック内で element()、$(...).valid()、または form() などの検証メソッドを呼び出すと、無限ループが発生しますが、バリデータ インスタンス プロパティ 'invalid' を使用して、無効なフィールド。 

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

ありがとう@Adamはここでフィドルを正しい軌道に乗せました

于 2013-02-14T17:20:42.657 に答える
1

unhighlight 関数では、コンテナーからエラー クラスを削除する前に、同じコンテナー内の他のすべてのフィールドが有効かどうかを確認する必要があります。何かのようなもの

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

同じコンテナー内の他のすべてのフォーム要素を選択する必要があります。ただし、再帰の問題が発生する可能性があります (私はあなたの状況を試していませんが、require_from_group メソッドのディスクを参照してください) 。

また、attr メソッドを介してクラスを設定しないでください。要素には、エラー クラスを設定/設定解除するときに削除する他の目的のための他のクラスがある場合があります。代わりに jQuery の addClass および removeClass 関数を使用します。

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