Form Validation Set Custom Validity

Question

I'm playing around with form validations. I've build a simple captcha field and I want to check it via javascript.

At this point it works static. I need to add an eventlistener, but don't know how.

Hope, you can help.

HTML

<form>
  <input type="text" id="field_robot" name="">
  <input type="submit" id="submit" name="submit">
</form>

JS

var val = document.getElementById('field_robot').value;
var field = document.getElementById('field_robot');

field.addEventListener('input', function(){
  if (val != '42') {
    field.setCustomValidity('invalid');
  } 
});

Thanks for your answer. I want the input field validated. Everytime the input of the "field_robot"-field is changed, it should be checked, if the input is 42. — Michael Kraemer
– Michael Kraemer, Commented Jun 18, 2018 at 12:04
You can add a onInput attribute to the input field. And add the function with the validation — Krishna Prashatt
– Krishna Prashatt, Commented Jun 18, 2018 at 12:08

Guillaume Georges · Accepted Answer · 2020-01-14 13:17:59Z

3

The issue is you're declaring val outside of your event listener. So, your value is never refreshed after the input. You need to retrieve the field's value inside the event listener.

See the snippet below :

var field = document.getElementById('field_robot');

field.addEventListener('input', function() {
  var val = document.getElementById('field_robot').value;
  if (val != '42') {
    field.setCustomValidity('invalid');
  } else {
    event.target.setCustomValidity('');
  }
});

<form id="myForm">
  <input type="text" id="field_robot" name="">
  <input type="submit" id="submit" name="submit">
</form>

Now, you can go a bit further and have a listener you could use for several input fields, using the event object provided by the listener and a fieldValidator function that would take your event and a boolean condition as parameters.

See this other snippet :

var field = document.getElementById('field_robot');

field.addEventListener('input', function(event) {
    fieldValidator(event, (field.value == '42'));
});

function fieldValidator(event, condition) {
    var val = event.target.value;
    if (!condition) {
        event.target.setCustomValidity('invalid');
    } else {
        event.target.setCustomValidity('');
    }

}

<form id="myForm">
      <input type="text" id="field_robot" name="">
      <input type="submit" id="submit" name="submit">
</form>

edited Jan 14, 2020 at 13:17

answered Jun 18, 2018 at 12:06

Guillaume Georges

4,0204 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user670839 Over a year ago

Input is a standard event - html.spec.whatwg.org/multipage/indices.html#event-input-input

Guillaume Georges Over a year ago

@catalin you're right. I updated. Thanks for pointing that out.

user670839 Over a year ago

One extra thing. You can also do the form validation for all the elements, on the submit button click event. This way you centralize the validation into one place.

Guillaume Georges Over a year ago

While you are correct, the OP asked for a validation happening upon changing the content of the input, not when submitting the form : "Everytime the input of the "field_robot"-field is changed, it should be checked, if the input is 42.".

Michael Kraemer · Accepted Answer · 2018-06-18 12:13:36Z

0

So now it works well.

  var field = document.getElementById('field_robot');

  field.addEventListener('change', function() {
  var val = document.getElementById('field_robot').value;
  if (val != '42') {
    field.setCustomValidity('invalid');
  } else {
    field.setCustomValidity('');
  };
});

answered Jun 18, 2018 at 12:13

Michael Kraemer

691 silver badge7 bronze badges

Collectives™ on Stack Overflow

Form Validation Set Custom Validity

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related