1

I am trying make a register form adn using jquery validation. I have a problem.

I want only one "warning message" for "birthday select box"..I couldnt manage this and it look terrible when i get 3x warning for each bday select box. How can i give "one" warning message if at least one box not choosed?

And my codes are below, i made it short and working for test:

<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>

如果未选择任何选择标签，请使用以下代码应用红色边框：

$('#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 回答