CODEWITHSUNDEEP
javascriptjqueryhtmlrequired
Reiden
Reiden

Reputation: 61

add/remove required attribute dynamically

I want to add/remove the required attribute of an input element. But somehow it doesn't work.

If offender Plate# text field is empty, Describe vehicle text field should be required.

Offender Plate #: <input type="text" id="plate_num_id" name="plate_num" onblur="checkForRequired()"><br>

Describe Vehicle: <textarea id="vehicle_desc_id" name="vehicle_desc"></textarea><br>

Then here is my function.

function checkForRequired() {

    var plateLength = document.getElementById("plate_num_id").value.length;

    if (plateLength < 1) {

        $("#vehicle_desc_id").add('required');
    } else {

        $("#vehicle_desc_id").removeAttr('required');
    }
}

I have also tried other methods:

document.getElementById("vehicle_desc_id").removeAttribute("requried");

document.getElementById("vehicle_desc_id ").required = true/false;

document.getElementById("vehicle_desc_id ").setAttribute("required ", "");

None seems to be working...

Upvotes: 3

Views: 18697

Answers (1)

Billy
Billy

Reputation: 2448

works when you sort the html out and remove space after brackets, edited again to remove after details if corrected

function checkForRequired() {

    var plateLength = document.getElementById("plate_num_id").value.length;
var vehicle = document.getElementById("vehicle")
    if (plateLength < 1) {

        vehicle.setAttribute('required','required');
    } else {
 
      vehicle.removeAttribute('required');
    }
}
input:required{border:1px solid red;}
<input type="text" id="plate_num_id" name="plate_num" onblur/onfocusout="checkForRequired()"><br/><br>
<input type="text" id="vehicle" />

Upvotes: 6

Related Questions