CODEWITHSUNDEEP
htmlformsvalidation
Edgar Quintero
Edgar Quintero

Reputation: 4441

HTML 5 Required Stays Required

I have a form that has a checkbox set as required:

<input required="required" oninvalid="this.setCustomValidity('Este campo es requerido')" type="checkbox" name="terms" value="Si Acepto" />

Initially, after the page loads and I hit submit (without clicking on the checkbox), the required attribute triggers correctly. I then click the checkbox and hit SUBMIT again, but the required attribute still triggers, it doesn't recognise that the checkbox has been checked and the required attribute has been fulfilled.

This is probably a very simple problem but how do I fix this?

Upvotes: 1

Views: 180

Answers (1)

nipeco
nipeco

Reputation: 760

Add onchange="this.setCustomValidity('')" as attribute to your checkbox. Since you set it to invalid once it will stay at this state! But when you reset the validation every time you change the value it works.

<input required="required" oninvalid="this.setCustomValidity('Este campo es requerido')" onchange="this.setCustomValidity('')" type="checkbox" name="terms" value="Si Acepto" />

Upvotes: 3

Related Questions