Question

我正在尝试使用jquery验证创建一个注册表单。我有一个问题。

我只想要一个“生日选择框”的“警告信息”..我无法管理这个，当我为每个bday选择框收到3x警告时，它看起来很糟糕。如果至少有一个方框未被选中，我如何给出“一个”警告信息？

我的代码在下面，我做了简短并且正在测试：

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

Answer 1

为生日标签周围的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');
}

});

当然，这可以避免使用您正在使用的验证器插件

验证登记表格

1 个答案: