CODEWITHSUNDEEP
javascriptdom
retroguy24242
retroguy24242

Reputation: 11

Changing value of HTML doesnt correctly change the value?

When I change the value of an element, the html inside changes however it doesnt get recognised as it still says field is required. I tried changing the elements required property to false but that didnt help either. Image

let element = document.getElementById('mat-input-2')

element.focus()
element.value = "[email protected]"
element.required = false;
element.blur();

<input _ngcontent-sde-c17="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-invalid ng-touched" data-test="email" formcontrolname="email" matinput="" placeholder="Email" type="email" id="mat-input-2" aria-invalid="true" aria-required="true" required="" aria-describedby="mat-error-3">

Upvotes: 1

Views: 93

Answers (2)

DecPK
DecPK

Reputation: 25408

required is a boolean attribute. If it is present in HTML element, doesn't matter it contains any value even the false value also, then it is considered as a true value. So you have to completely remove the attribute. You can use either removeAttribute or toggleAttribute.

You can see the example of all three setAttribute, removeAttribute, and toggleAttribute

const element = document.querySelector("input")
const btnSetAttribute = document.querySelector('#btnSetAttribute');
const btnRemoveAttribute = document.querySelector('#btnRemoveAttribute');
const btnToggleAttribute = document.querySelector('#btnToggleAttribute');

btnSetAttribute.addEventListener('click', e => {
    if( !element.disabled ){
        element.setAttribute('disabled', true);
    } else {
        element.setAttribute('disabled', false);
    }
})

btnRemoveAttribute.addEventListener('click', e => {
    if( !element.disabled ){
        element.setAttribute('disabled', true);
    } else {
        element.removeAttribute('disabled');
    }
})

btnToggleAttribute.addEventListener('click', e => {
    element.toggleAttribute('disabled');
})
<input type="text" placeholder="click button to disable"/>
<br />
<button id="btnSetAttribute"> disable using setAttribute </button>
<button id="btnRemoveAttribute"> disable using removeAttribute </button>
<button id="btnToggleAttribute"> disable using toggleAttribute </button>

You should use either removeAttribute or toggleAttribute.

const input = document.querySelector('input');

let element = document.getElementById('mat-input-2')

element.focus()
element.value = "[email protected]"
element.toggleAttribute('required');
element.toggleAttribute('aria-required');
element.blur();
<input _ngcontent-sde-c17="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-invalid ng-touched" data-test="email" formcontrolname="email" matinput="" placeholder="Email" type="email" id="mat-input-2" aria-invalid="true" aria-required="true" required="" aria-describedby="mat-error-3">

Upvotes: 1

Miu
Miu

Reputation: 844

To remove:

element.removeAttribute('required');
element.setAttribute('aria-required', 'false');

To add:

element.setAttribute('required', '');
element.setAttribute('aria-required', 'true');

If you toggle true/false in required field repeatedly, it's better to make a function for that operation.

Here is an example:

<input id="inputElem" type="text" aria-required="true" required>

const inputElem = document.querySelector('#inputElem');

function toggleInputRequired(element, status = true) {
  if (status) {
    element.setAttribute('required', '');
    element.setAttribute('aria-required', 'true');
  } else {
    element.removeAttribute('required');
    element.setAttribute('aria-required', 'false');
  }
}

toggleInputRequired(inputElem, false); // Remove required
toggleInputRequired(inputElem); // Add required

Upvotes: 0

Related Questions