I'm struggling with making a input field required only if specific options are selected in a <select> list.
For example:
<select> <option value="model1">Model 1</option> <option value="model2">Model 2</option> <option value="model3">Model 3</option> <option value="model4">Model 4</option>
</select>
<input type="text" name="extra">The input extra gets required if Model 2 or 3 is selected.
How do I do this?
44 Answers
Here is a fully working example to demonstrate how to use jQuery to solve both cases. Note that you must include the reference to the jQuery library as I have done in the head tags. You also might move the javascript/jQuery into a separate file and simply include it by reference.
<html> <head> <script src="//"></script> <script type="text/javascript"> $(document).ready(function() {
//alert('Document is ready'); $('#model').change(function() { var sel = $(this).val(); if (sel == 'model2' || sel == 'model3') $('input[name=extra]').show(); }); $('input[name=btn_submit]').click(function() { var sel = $('#model').val(); if (sel == 'model2' || sel == 'model3') { if ($('input[name=extra]').val() == '') { alert('Please complete all fields'); return false; //prevent submit from submitting }else{ alert('Your entry was submitted'); } }else{ //Model is NOT 2 or 3 so don't check alert('Your entry was submitted without checking input field value.'); } }); }); </script> </head>
<body> <select> <option value="model1">Model 1</option> <option value="model2">Model 2</option> <option value="model3">Model 3</option> <option value="model4">Model 4</option> </select> <input type="text" name="extra"> <input type="submit" name="btn_submit" value="Submit It">
</body>
</html>Well you can only do so much with javascript client-side. Ultimately you will have to enforce this on the server. To do this client-side without relying on browser specific implementations or HTML5, you will need to manually check the values you want to be requires with an onsubmit() event handler.
<form onsubmit="return validateFormData(this)">
Also be sure to give your select element a name for ease of use:
<select name="model"></select>
Then in your javascript:
function validateFormData(oForm) { //Let's say that a value of 'model3' makes 'extra' required if(oForm.model.value=='model3') { if(oForm.extra.value=='') { //returning false will prevent the form from submitting return false; } }
}You can add a required class when a certain option is selected. Then on submit check the required elements to make sure something it's not empty
$('#model').change(function () { // check if it's model2 or model3 var isRequired = /model2|model3/i.test(this.value); $('input[name=extra]').toggleClass('required',isRequired);
});
$('form').submit(function(){ // get all empty required fields var reqEmpty = $('.required').filter(function(){ return $.trim(this.value).length === 0; }); // if any empty required fields are found - do something if(reqEmpty.length){ alert('empty required field'); return false; }
});the red border in the fiddle is just to show you when the required class has been added.
Assuming you're trying to set the required property:
$('#model').change(function(){ var index = this.selectedIndex; $('input[name="extra"]').prop('required', function(){ return index == 1 || index == 2; });
});
