表单验证集自定义有效性

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

Answer 1

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>

Answer 2

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