0

私はこのフォームを持っています:

<form id="consult-form">
    <div class="group">
        <label for="pfname">First Name<span>*</span></label>
        <div class="input">
            <input class="large required" type="input" id="pfname" name="pfname" size="30" />
        </div>
    </div>

    <div class="group">
       <label for="plname">Last Name<span>*</span></label>
       <div class="input">
           <input class="xlarge required" type="input" id="plname" name="plname" size="30" />
       </div>
    </div>

    <div class="group">
        <label for="pphone">Phone<span>*</span></label>
        <div class="input">
            <input class="large required" type="tel" id="pphone" name="pphone" size="30" />
        </div>
    </div>
</form>

これら 3 つのフィールドを検証するためにjQuery Validationを使用しています。プラグインのコア機能を正常に動作させることができました。私がやろうとしているのは、特定の入力フィールドごとに、含まれる div.group に「.error」のクラスを追加することです。

私がこれまでに持っているものをお見せします：

$(function(){

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-inline"
});

$('#consult-form').validate({

    invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    $required = $('input.required');
                    $required.parents('div.group').removeClass('error');

                    $required.each(function(index){
                        if ($(this).parent().has('span')) {
                            console.log(index+' is true');
                            $(this).parents('div.group').addClass('error');
                        }
                    });
                }
            },

    messages: {
        pfname: "Please enter your first name",
        plname: "Please enter your last name",
        pphone: "We need your phone number"
    }

});
});

その結果、「.error」クラスが追加されないことがわかりました。配列トラバース関数をコメントアウトすると、クラスが追加されます。基本的に私が見ているのは、DOM の変更、スパン要素の追加と削除が、このコードによって読み取られていないことです。DOM の変更を監視するために live() または delegate() の組み合わせでこのようなものを使用する必要がありますか?

ここに jsFiddle があります: http://jsfiddle.net/ToddSmithSalter/ueNZ4/1/

4

1 に答える 1

0

間違った入力フィールド（ラベルなど）のグループ全体に特別なスタイルが必要であることを正しく理解していれば、ここにあなたのフィドルのフォークがあります - http://jsfiddle.net/aldis/3A7tV/1/ 私はJS "showErrorsを追加しました" バリデータで:

$(function(){
    $.validator.setDefaults({
        errorElement: "span",
        errorClass: "help-inline"
    });
    $('#consult-form').validate({
        showErrors: function(errorMap, errorList) {
            this.defaultShowErrors();
            $('.error').removeClass('error');
            $('input.help-inline').parent().parent().addClass('error');
        },        
        invalidHandler: function(form, validator) {
                    var errors = validator.numberOfInvalids();
                    if (errors) {
                        $required = $('input.required');
                        $required.each(function(index){
                            if ($(this).parent().has('span')) {
                                console.log(index+' is true');
                            }
                        });
                    }
                },
        messages: {
            pfname: "Please enter your first name",
            plname: "Please enter your last name",
            pphone: "We need your phone number"
        }

    });
});
于 2011-10-14T21:56:56.203 に答える