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');
  } 
}); 

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');
  } 
}); 

• javascript
• html
• forms
• validation

• What exactly is your issue? – Krishna Prashatt Commented Jun 18, 2018 at 12:01
• 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 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 Commented Jun 18, 2018 at 12:08

2 Answers 2

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>

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('');
  };
});