I have two < select > that allow users to choose from.
Condition
Below shows how my code will look like
Html
<select id="select1">
<option id="chosenTest"> Test </option>
<option> Exam </option>
</select>
<select id="select2">
<option> test1 </option>
<option> test2 </option>
</select>
JS
$(function() {
if ($("#chosenTest").is(":checked"))
{
$("#select2").is(":required");
}
})
Try this out:
$('#select1').on('change', function() {
if($('#select1').val() == 'TEST') {
$("select2").prop('required',true);
} else if ($('#select1').val() == 'EXAM') {
$('#select2').removeAttr('required');
}
});Your code will only check right after loading whether a particular option in the first select box was chosen. You will need to set up an event listener for the select box and - ideally - a validation function for the <form> element.
The below script demonstrates how to automatically choose a valid option (="test2") in the second select box, whenever the option "Test" was chosen in the first.
var $sel; // global variable $sel
function setSel2(){
if($sel.val()=="Test")
$("#select2").val("test2")
}
$(function() {
$sel=$("#select1").on("change",setSel2);
setSel2();
})<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form>
<select id="select1">
<option id="chosenTest"> Test </option>
<option> Exam </option>
</select>
<select id="select2">
<option> test1 </option>
<option> test2 </option>
</select>
</form>Recommend to have a generic validate function to fetch all required fields in a form or container. Then check for provided input and alter required or mandatory class to the fields.
Try below snippet for specifically to your selection validation:
$(document).on('click', '#btnSubmit', function() {
if ($('#select1').val() === '') {
$('#select1').addClass('mandatory');
$('.message').removeClass('success').addClass('error').text('Please select mandatory fields');
}
else if ($('#select1').val() === '' && $('#select2').val() === '') {
$('#select1').addClass('mandatory');
$('#select2').addClass('mandatory');
$('.message').addClass('error').text('Please select mandatory fields');
// Avoid Backend operations
}
else if ($('#select1').val() === 'Test' && $('#select2').val() === '') {
$('#select1').removeClass('mandatory');
$('#select2').addClass('mandatory');
$('.message').removeClass('success').addClass('error').text('Please select mandatory fields');
// Avoid Backend operations
}
else {
$('#select1').removeClass('mandatory');
$('#select2').removeClass('mandatory');
$('.message').removeClass('error').addClass('success').text('Provided input is valid');
// Perform any operations
}
});
$(document).on('change', '#select1', function() {
if ($('#select1').val() === '') {
$('#select2').val('');
}
});.success {
color: green;
}
.error {
color: red;
}
.mandatory {
border-color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
<option value=''>Please Select</option>
<option value='Test'>Test</option>
<option value='Exam'>Exam</option>
</select>
<select id="select2">
<option value=''>Please Select</option>
<option value='test1'>test1</option>
<option value='test2'>test2</option>
</select>
<button id="btnSubmit">Submit</button>
<label class="message"></label>