1

このプラグインを使用して検証するフォームがあります: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

を使用して、リンクがクリックされた場合に表示されるこのフォームにフィールドを追加することにしました.toggle()。

フォームは次のとおりです。

<form id="identification" action="Test.php" method="post">
    <fieldset>
        <legend>Identification</legend>
        <p>
            <label for="firstName">First name</label>
            <input id="firstName" type="text" name="firstName" class="required"/>
        </p>
        <p>
            <label for="lastName">Last name</label>
            <input id="lastName" type="text" name="lastName" class="required"/>
        </p>
        <p>
            <label for="email">E-mail address</label>
            <input id="email" type="text" name="email" class="required email"/>
        </p>
        <div class="hiddenFields">
            <p>
                <label for="zip">Zip code</label>
                <input id="zip" type="text" name="zip" class="required zip"/>
            </p>
            <p>
                <label for="city">City</label>
                <input id="city" type="text" name="city" class="required"/>
            </p>        
        </div>
        <p class="showFields"><a class="toggle" href="#">Click here</a> for more info</p>
    </fieldset> 
    <p class="submit"><input type="submit" value="Submit"/></p>
</form>

.hiddenFieldsdiv はdisplay: none;私の CSS のように設定されています。

検証スクリプトは次のとおりです。

$(document).ready(function(){
    $("#identification").validate({
        rules: {
                "zip": { digits:true, minlength:5, maxlength:5 }
        }
    });

    jQuery.extend(jQuery.validator.messages, {
        required: "This field is needed.",
        email: "Please enter a valid e-mail address.",
        digits,minlength,maxlength: "Please enter a valid zip code.",
        minlength: "Please enter a valid zip code.",
        maxlength: "Please enter a valid zip code."
    });
});

トグル スクリプトは次のとおりです。

$(document).ready(function(){
    $("a.toggle").click(function(e){
        e.preventDefault();
        $(".hiddenFields").toggle("fast");
    });
});

.hiddenFieldsこれで、 divがなくてもすべて正常に動作します.toggle()が、追加しようとすると、検証が機能しなくなり、その理由がよくわかりません。

フィールドが非表示の場合とそうでない場合に、このフォームを検証するにはどうすればよいですか? 現在、どちらの場合にも機能しません。

ご協力いただきありがとうございます。

4

1 に答える 1

1

ここでは jsFiddle にあります。

digits,minlength,構文エラーの原因となるローグがあります。

jQuery.extend(jQuery.validator.messages, {
   required: "This field is needed.",
   email: "Please enter a valid e-mail address.",
   digits,minlength,maxlength: "Please enter a valid zip code.",
   minlength: "Please enter a valid zip code.",
   maxlength: "Please enter a valid zip code."
});

あなたもmaxlengthそこに2回入りました。

これに変更すると修正されます：

jQuery.extend(jQuery.validator.messages, {
   required: "This field is needed.",
   email: "Please enter a valid e-mail address.",
   minlength: "Please enter a valid zip code.",
   maxlength: "Please enter a valid zip code."
});
于 2012-05-30T10:17:20.130 に答える