jQuery Validate Required Select
JqueryJquery ValidateJquery Problem Overview
I am trying to validate html select element using jQuery Validate plugin. I set "required" rule to true but it always passes validation because zero index is chosed by default. Is there any way to define empty value that is used by required rule?
UPD. Example. Imagine we have the following html control:
<select>
<option value="default">Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
I want Validation plugin to use "default" value as empty.
Jquery Solutions
Solution 1 - Jquery
An easier solution has been outlined here: https://stackoverflow.com/questions/1271640/jquery-validate-select-box
Make the value be empty and add the required attribute
<select id="select" class="required">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
Solution 2 - Jquery
You can write your own rule!
// add the rule here
$.validator.addMethod("valueNotEquals", function(value, element, arg){
return arg !== value;
}, "Value must not equal arg.");
// configure your validation
$("form").validate({
rules: {
SelectName: { valueNotEquals: "default" }
},
messages: {
SelectName: { valueNotEquals: "Please select an item!" }
}
});
Solution 3 - Jquery
> the most simple solution
just set the value of the first option to empty string value=""
<option value="">Choose...</option>
and jquery validation required
rule will work
Solution 4 - Jquery
use min rule
set first option value to 0
'selectName':{min:1}
Solution 5 - Jquery
You only need to put validate[required]
as class of this select and then put a option with value=""
for example:
<select class="validate[required]">
<option value="">Choose...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
Solution 6 - Jquery
I don't know how was the plugin the time the question was asked (2010), but I faced the same problem today and solved it this way:
-
Give your select tag a name attribute. For example in this case
<select name="myselect">
-
Instead of working with the attribute value="default" in the tag option, disable the default option or set value="" as suggested by Andrew Coats
<option disabled="disabled">Choose...</option>
or
<option value="">Choose...</option>
-
Set the plugin validation rule
$( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });
or
`<select name="myselect" class="required">`
Obs: Andrew Coats' solution works only if you have just one select in your form. If you want his solution to work with more than one select add a name attribute to your select.
Hope it helps! :)
Solution 7 - Jquery
<select class="design" id="sel" name="subject">
<option value="0">- Please Select -</option>
<option value="1"> Example1 </option>
<option value="2"> Example2 </option>
<option value="3"> Example3 </option>
<option value="4"> Example4 </option>
</select>
<label class="error" id="select_error" style="color:#FC2727">
<b> Warning : You have to Select One Item.</b>
</label>
<input type="submit" name="sub" value="Gönder" class="">
JQuery :
jQuery(function() {
jQuery('.error').hide(); // Hide Warning Label.
jQuery("input[name=sub]").on("click", function() {
var returnvalue;
if(jQuery("select[name=subject]").val() == 0) {
jQuery("label#select_error").show(); // show Warning
jQuery("select#sel").focus(); // Focus the select box
returnvalue=false;
}
return returnvalue;
});
}); // you can change jQuery with $
Solution 8 - Jquery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id="myform">
<select class="form-control" name="user_type">
<option value="">Select</option>
<option value="2">1</option>
<option value="3">2</option>
</select>
</form>
<script>
$('#myform').validate({ // initialize the plugin
rules: {
user_type:{ required: true},
}
});
</script>
select value will be blank
Solution 9 - Jquery
The solution mentioned by @JMP worked in my case with a little modification:
I use element.value
instead of value
in the addmethod
.
$.validator.addMethod("valueNotEquals", function(value, element, arg){
// I use element.value instead value here, value parameter was always null
return arg != element.value;
}, "Value must not equal arg.");
// configure your validation
$("form").validate({
rules: {
SelectName: { valueNotEquals: "0" }
},
messages: {
SelectName: { valueNotEquals: "Please select an item!" }
}
});
It could be possible, that I have a special case here, but didn't track down the cause. But @JMP's solution should work in regular cases.
Solution 10 - Jquery
It's simple, you need to get the Select field value and it cannot be "default".
if($('select').val()=='default'){
alert('Please, choose an option');
return false;
}
Solution 11 - Jquery
how to validate the select "qualifica" it has 3 choose
$(document).ready(function(){
$('.validateForm').validate({
rules: {
fullname: 'required',
ragionesociale: 'required',
partitaiva: 'required',
recapitotelefonico: 'required',
qualifica: 'required',
email: {
required: true,
email: true
},
},
submitHandler: function(form) {
var fullname = $('#fullname').val(),
ragionesociale = $('#ragionesociale').val(),
partitaiva = $('#partitaiva').val(),
email = $('#email').val(),
recapitotelefonico = $('#recapitotelefonico').val(),
qualifica = $('#qualifica').val(),
dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;
$.ajax({
type: "POST",
url: "util/sender.php",
data: dataString,
success: function() {
window.location.replace("./thank-you-page.php");
}
});
return false;
}
});
});