0

非表示の入力と非表示の入力の両方があるフォームを検証しようとしています。フォーム検証設定に、非表示の入力を検証するために無視する行 ""を追加しましたが、そうすると、その前にある必要なテキスト入力は検証されず、後に配置された場合にのみ検証されます。もう1つ発生するのは、firstnameの検証が最初の送信後のぼかしで機能することです（ただし、送信自体はブロックされません）。

これが私のコードとjsfiddleDEMOへのリンクです：

JS：

    var countries = [{label:"Vanuatu", code:"VU"},
        {label:"Ecuador", code:"EC"}];    
    $().ready(function() {
$('#country').autocomplete({
    source : function(request, response) {
        var matcher = new RegExp('^'+$.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(countries, function(element, index) {
            return matcher.test(element.label);
        }));
    },
    delay : 0,
    change : function(event, ui) {
        $('#countryCode').val(ui.item ? ui.item.code : '');
    }
});
$("#signupForm").validate({
    ignore: "",
    rules: {
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        country: {
            required: true
        },
        countryCode: {
            required: function(element){
                return $("#signupForm").validate().element( "#country" );
            }
        },
        email: {
            required: true,
            email: true
        }
    },  
    messages: {
        firstname: "Please enter your first name",
        lastname: "Please enter your last name",
        country: "Please select a country",
        countryCode: "Please select a valid country",
        email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
        alert("fine!");
    }
});

}）;
HTMLフォーム：

    <form id="signupForm" method="post" name="" action="">
<p>
        <label for="firstname"></label>
        <input class="inputText" type="text" id="firstname" name="firstname" placeholder="First Name">
    </p>
            <p>
        <label for="country"></label>
        <input class="inputText" type="text" id="country" name="country" placeholder="Country"/>

        <input type="hidden" name="countryCode" id="countryCode" />
    </p>
                <p>
        <label for="lastname"></label>
        <input class="inputText" type="text" id="lastname" name="lastname" placeholder="Last Name">
                    </p>
                    <p>
        <label for="email"></label>
        <input class="inputText" type="text" id="email" name="email" placeholder="Email">
                        </p>
                        <p>
        <input class="submit" type="submit" id="signupButton" value="SUBMIT" />   
                        </p>
    </form>
4

1 に答える 1

1

countryCode問題は検証にあると思います

あなたが試すことができます

countryCode: {
    required: function(element){
        return $("#country").val().length > 0;
    }
}

デモ：フィドル

于 2013-02-23T15:49:37.793 に答える