Question

我在下面的代码中的注册表单标签中有一组html5字段。内置的jquery插件名为validation.js，可以正常使用所有html字段，而这些字段没有在html元素标签上定义的任何其他jquery函数“ id“属性。在validate.js中，jquery验证规则：和messages：是根据html元素的“name”属性自定义的。我的问题是jquery验证不能处理那些id用于定义其他函数的html元素标签例如：

<p>Are you a user1 or user2 </p>
          <div class="form-group">
          <label class="control-label" for="usertype"></label>
            <select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
                <option value="none" selected>Select user type</option>
                <option id="S" value="user1">user1</option>
                <option id="T" value="user2">user2</option>



            </select>

在上面的代码段中，您可以看到usertype。当选择usertype时，有一个jquery，它对于id =“usertype”工作onChange事件。但是我的要求是进行验证，用户必须强制选择带有jquery验证插件的usertype以及另一个jquery函数。如何解决这个问题？如何为选择下拉列表编写验证规则（必需）。

  <div class="form-group">
                <input type="email" class="form-control input-lg" name="uname" placeholder="email address" id="uname" onBlur="checkAvailability()">
                <span id="user-availability-status"></span>
                <p><img src="loading-small.gif" id="loaderIcon" style="display:none" /></p>
                <div id ="errors">
                </div>
              </div>
               <div class="form-group">
          <input class="form-control input-lg" name="password" id="password" placeholder="Password" type="password">
            </div>
  <div class="form-group">
    <input class="form-control input-lg" name="password2" placeholder="Re-enter password" type="password">
  </div>
              <!--<div class="form-group">
                <input type="password" class="form-control input-lg" name="cfmPassword" placeholder="Retype above password" id="cfmPassword">
                 <span id="confirm-password-status"></span>
              </div>-->
              <p>Are you a user1 or user2 </p>
              <div class="form-group">
              <label class="control-label" for="usertype"></label>
                <select name="usertype" class="form-control input-lg" placeholder="Select user type" id="usertype">
                    <option value="none" selected>Select user type</option>
                    <option  value="user1">user1</option>
                    <option  value="user2">user2</option>



                </select>
                <div id ="errors">
                </div>
              </div>
              <p>&nbsp;</p>

              <!--Student Section Form BEGIN-->
              <div id="user1">
              <div class="form-group" >
                <input type="text" align="center" class="form-control input-lg" name="user1_first_name"  placeholder="First Name" id="firstname">
              </div>
              <div class="form-group">
                <input type="text"  align="center" class="form-control input-lg" name="user1_last_name" placeholder="Last Name" id="lastname">
              </div>
              <div class="form-group">
    <label class="col-xs-3 control-label">Gender</label>
    <div class="col-xs-9">
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" class="form-control input-lg"  name="gender" value="male" /> Male
            </label>
            <label class="btn btn-default">
                <input type="radio" class="form-control input-lg" name="gender" value="female"/> Female
            </label>
            <label class="btn btn-default">
                <input type="radio" class="form-control input-lg" name="gender" value="other" /> Other
            </label>
        </div>
    </div>
</div>

如何使用Jquery Validation Plugin

0 个答案: