Validate select box with own custom message and rule in Jquery validation plugin

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

Possible duplicate of [Can I apply the required attribute to — Alive to die - Anant, Apr 17 '17 at 06:50

Mayank Pandeyz · Answer 1 · 2017-04-17T07:00:53.067

2

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

edited Apr 17 '17 at 07:00

answered Apr 17 '17 at 06:53

Mayank Pandeyz

25,704
4
40
59

thank you but when i make the first value as blank option also it doesnot show the error message – Karthiga Apr 17 '17 at 06:56

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

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?

edited May 23 '17 at 12:25

Community

1
1

answered Apr 17 '17 at 06:58

Alive to die - Anant

70,531
10
51
98

Karthiga i have added an example that how's it going to work.Thanks – Alive to die - Anant Apr 17 '17 at 07:02
yes it worked ..i included jquery.min.js and jquery.validate.js after i added what you gave it working fine may be the version problem – Karthiga Apr 17 '17 at 07:04
@Karthiga glad to help you.:):)..Thanks – Alive to die - Anant Apr 17 '17 at 07:05

score 0 · Answer 3 · answered Apr 17 '17 at 06:54

0

You can try like this:

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

answered Apr 17 '17 at 06:54

Swapnil Patil

912
1
7
14

Validate select box with own custom message and rule in Jquery validation plugin

3 Answers3