Ad

Using Jquery To Set Required Based On Input Value

I want to change the required attribute of an HTML input if the value of another input is larger than 8. (without submitting anything)

<input id="inputCheck" name="inputCheck" placeholder="" required="true" value="" type="number">
<input id="inputReact" name="inputReact" placeholder="" required="false" value="" type="text">

Basically if the value of inputCheck is larger than 8, set rquired of inputReact to true. I know how to change the attribute, problem is checking the value without submitting.

Ad

Answer

Add a change event listener to the required input field.

$('#inputCheck').change(function() {
    const value = $(this).val();
    const rInput$ = $('#inputReact');
    if(value > 8) { // could also use parseInt(value) to convert value into number if it isn't already.
        rInput$.attr('required', true); 
    } else {
        rInput$.removeAttr('required');
    }
});
Ad
source: stackoverflow.com
Ad