1

jquery検証を使用して登録フォームを作成しようとしています。私は問題があります。

「誕生日の選択ボックス」に 1 つの「警告メッセージ」だけが必要です..これを管理できず、誕生日の選択ボックスごとに 3 回警告が表示されると見栄えが悪くなります。少なくとも 1 つのボックスが選択されていない場合、「1 つ」の警告メッセージを表示するにはどうすればよいですか?

そして、私のコードは以下の通りです。私はそれを短くしてテストのために働いています:

<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.validate.js"></script>
 <script>
  $(document).ready(function(){
    $.validator.addMethod("username", function(value, element) {
        return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
    }, "Username must contain only letters, numbers, or underscore.");

    $("#regForm").validate();
  });

  </script>

</head>
<body>


<div>
        <form method="post" id="regForm" action="register.php">
            <div>
                Name<br>
                <input id="user_name" name="name" type="text" minlength="5" class="required username"/><br>

            </div>
            <div>
                E-mail<br>
                <input id="usr_email3" name="email" type="text" class="required email"/><br>

            </div>
            <div>
                Password<br>
                <input name="pass1" type="password" class="required password" minlength="5" id="pwd" /><br>

            </div>
            <div>
                Confirm Password<br>
                <input id="pwd2" name="pass2" class="required password" type="password" minlength="5" equalto="#pwd" /><br>

            </div>


            <div>
            Birthday: 
            <select name="birthday_day" class="required">
            <option value="">Day</option>
            <option value="1" >1</option>
            <option value="2" >2</option>
            </select> 
            <select name="birthday_month" class="required">
            <option value="">Month</option>
            <option value="1" >January</option>
            </select> 
            <select name="birthday_year" class="required">
            <option value="">Year</option>
            <option value="1900" >1900</option>
            </select>

            </div>
            <div>
            Gender:
            <select name="gender" class="required">
            <option value="">Choose</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option><br /></div>
            <br>
            <div>       
            <input id="doRegister" name="doRegister" type="submit" value="Send"/>
            </div>
        </form>

</div>
4

1 に答える 1

0

誕生日タグを囲む div に id を与えます。

<div id="required">
            Birthday: 
            <select name="birthday_day" class="required">
            <option value="">Day</option>
            <option value="1" >1</option>
            <option value="2" >2</option>
            </select> 
            <select name="birthday_month" class="required">
            <option value="">Month</option>
            <option value="1" >January</option>
            </select> 
            <select name="birthday_year" class="required">
            <option value="">Year</option>
            <option value="1900" >1900</option>
            </select>

            </div>

以下のコードを使用して、select タグのいずれかが選択されていない場合に赤い境界線を適用します。

$('#doRegister').click(function(){

var a = $('select[name="birthday_day"]').val();
var b = $('select[name="birthday_month"]').val();
var c = $('select[name="birthday_year"]').val();

if(a == '' || b == '' || c == '')
{
  $('div#required').css('border', '1px solid f60f60');
}
else
{
 $('div#required').css('border', 'none');
}

});

もちろん、これにより、使用しているバリデータプラグインの使用が回避されます

于 2012-07-21T23:33:54.913 に答える