I have following code in jQuery.
I need to display a validation message "Year Required" when the option value of select
element is "0".
<script type="text/javascript">
$(document).ready(function () {
$("#register").validate({
debug: true,
rules: {
year: {
required: function () {
if ($("#year option[value='0']")) {
return true;
} else {
return false;
}
}
}
},
messages: {
year: "Year Required",
},
});
})
</script>
Select box
<select name="year" id="year">
<option value="0">Year</option>
<option value="1">1919</option>
<option value="2">1920</option>
<option value="3">1921</option>
<option value="4">1922</option>
</select>
This question is related to
jquery
jquery-validate
To put a require rule on a select list you just need an option with an empty value
<option value="">Year</option>
then just applying required on its own is enough
<script>
$(function () {
$("form").validate();
});
</script>
with form
<form>
<select name="year" id="year" class="required">
<option value="">Year</option>
<option value="1">1919</option>
<option value="2">1920</option>
<option value="3">1921</option>
<option value="4">1922</option>
</select>
<input type="submit" />
</form>
http://docs.jquery.com/Plugins/Validation/Methods/required
edit the code for 'select' as below for checking for a 0 or null value selection from select list
case 'select':
var options = $("option:selected", element);
return (options[0].value != 0 && options.length > 0 && options[0].value != '') && (element.type == "select-multiple" || ($.browser.msie && !(options[0].attributes['value'].specified) ? options[0].text : options[0].value).length > 0);
Jquery Select Box Validation.You can Alert Message via alert or Put message in Div as per your requirements.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="message"></div>_x000D_
<form method="post">_x000D_
<select name="year" id="year">_x000D_
<option value="0">Year</option>_x000D_
<option value="1">1919</option>_x000D_
<option value="2">1920</option>_x000D_
<option value="3">1921</option>_x000D_
<option value="4">1922</option>_x000D_
</select>_x000D_
<button id="clickme">Click</button>_x000D_
</form>_x000D_
<script>_x000D_
$("#clickme").click(function(){_x000D_
_x000D_
if( $("#year option:selected").val()=='0'){_x000D_
_x000D_
alert("Please select one option at least");_x000D_
_x000D_
$("#message").html("Select At least one option");_x000D_
_x000D_
}_x000D_
_x000D_
_x000D_
});_x000D_
_x000D_
</script>
_x000D_
simplify the whole thing a bit, fix some issues with commas which will blow up some browsers:
$(document).ready(function () {
$("#register").validate({
debug: true,
rules: {
year: {
required: function () {
return ($("#year option:selected").val() == "0");
}
}
},
messages: {
year: "Year Required"
}
});
});
Jumping to an assumption, should your select not have this attribute validate="required:true"
?
Source: Stackoverflow.com