0

I have a set of html5 fields inside a registration form tags in the code below.The inbuilt jquery plugin called validation.js is working fine with all the html fields which doesnt have any other jquery function defined on the html element tag's "id" attribute. In validate.js , the jquery validation rules: and messages: are customised with respect to html element's "name" attribute.My problem is jquery validations are not working on those html element tags whose id is used for defining other functions For eg :

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

In the above code snippet you can see the usertype . when the usertype is selected there is a jquery which works onChange event with respect to the id="usertype".But my requirement is to do the validation that,the user must mandatorily select the usertype with the jquery validation plugin as well with the other jquery function .How to solve this? How can i write the validation rule for the select dropdown (required).

  <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>
Sean Ch
  • 593
  • 9
  • 21
Sayuj3
  • 307
  • 4
  • 19

0 Answers0