在Jquery验证插件中使用自己的自定义消息和规则验证选择框

Question

When i am using jquery validation plugin it didnot work correctly for my dropdown box..

My html code is

<select class="control-select form-control" name="job_title" id="job_title" >
  <option value="Select Role">-- Select Role--</option>                              
  <option value="Admin" {{ ($admin->job_title=="Admin") ? "selected" : "" }}>Admin</option>
  <option value="Subadmin" {{ ($admin->job_title=="Subadmin") ? "selected" : "" }}>Subadmin</option>
  <option value="Superadmin" {{ ($admin->job_title=="Superadmin") ? "selected" : "" }}>Superadmin</option>
</select>

And inside jquery validation rule i gave like this

"job_title": {
    required: true
},

but is didnot worked so whats the alternate way to make select box as required field

Answer 1

It is working perfect,the issue is in your html, check this line:

<option value="Select Role">-- Select Role--</option>  

To validate dropdown using validation plugin, you have to pass the first dropdown value as blank like:

<option value="">-- Select Role--</option>  

Try this, it will solve your problem.

Explanation: require validation will check for value attribute, but in your case the value is there value="Select Role" , so make the first dropdown value blank.

Working Fiddle

Answer 2

Need to replace value="Select Role" with value="" like below:-

Example:-

 $(document).ready(function() { $("#signupForm").validate({ rules: { "job_title": { required: true }, } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> <form id="signupForm"> <select class="control-select form-control" name="job_title" id="job_title"> <option value="">-- Select Role--</option> <option value="Admin">Admin</option> <option value="Subadmin">Subadmin</option> <option value="Superadmin">Superadmin</option> </select> <input type ="submit" value = "click me"> </form> 

Reference taken:- Can I apply the required attribute to <select> fields in HTML5?

Answer 3

You can try like this:

$("form").validate({
  rules: {
  job_title: { valueNotEquals: "default" }
  },
  messages: {
  job_title: { valueNotEquals: "Please select field" }
  }  
});