jquery - セレクトボックスの検証

Question

jqueryを使用してフォームの検証を行っています。選択リスト メニューを検証する方法がわかりません。

これで私を助けてくれませんか。

ここに私のコードとFIDDLEがあります

$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
    // validate the comment form when it is submitted
    $("#commentForm").validate();

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",           
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        }
    });



});

Answer 1

1) IDforselectタグを設定します。

2)空の文字列を値としてデフォルト オプションを作成します。

<option value="">select an option</option>

---

<select id="country" name="country"> <!--SET AN ID-->
        <option value="">select an option</option> <!--DEFAULT OPTION-->
        <option value="Afghanistan">Afghanistan</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="American Samoa">American Samoa</option>
        <option value="Andorra">Andorra</option>
        <option value="Angola">Angola</option>
        <option value="Anguilla">Anguilla</option>
        <option value="Antarctica">Antarctica</option>
        <option value="Antigua &amp; Barbuda">Antigua &amp; Barbuda</option>
        <option value="Antilles, Netherlands">Antilles, Netherlands</option>
        <option value="Arabia, Saudi">Arabia, Saudi</option>
        <option value="Argentina">Argentina</option>  
</select>

JS で、以下のコードをvalidateメソッドに追加し、

ruleブロック内

country: {
    required: true
 }

messagesブロック内

country: "Please select an option"

この動作中のフィドルを確認してください

参考までに:必須フィールドには、*違いを示すために接頭辞または接尾辞を付ける必要があります。

ご理解いただければ幸いです。