input validation ONLY onblur

Question

I would like my field validation to occur ONLY when the user leaves the field. I've tried the techniques in jQuery validation onblur (see francios wahl's response), but the user experience is that the validation is onblur the FIRST TIME and then reverts to onchange. Is this expected behavior? I can't see why the even would changed.

The entire page can be seen at http://ginof.users.sonic.net/part4-wOutFunction.html

$(function() {

$("#inputForm").validate({
onfocusout: function (valueToBeTested) {
    $(valueToBeTested).valid();
},
rules:
    {
    valueToBeTested: { required: true, digits: true, minlength: 5, maxlength: 5 }
}
}); 

});

Answer 1

This is the default behaviour of the jQuery validation plugin as described on this page

In addition, once a field was highlighted as being invalid, it is validated whenever the user types something in the field (option onkeyup).

If you add the option onkeyup set to false then this will cancel this default behaviour as in the snippet below.

Also, the validation plugin has a method for evaluating a single element called element (Details here), which you may want to consider instead of using .valid() on the element.

$(function() {

  $("#inputForm").validate({
    onfocusout: function(valueToBeTested) {
      $(valueToBeTested).valid();
    },
    onkeyup: false,
    rules: {
      valueToBeTested: {
        required: true,
        digits: true,
        minlength: 5,
        maxlength: 5
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<div class="space">
  <h1>After the first validation, this reverts from onblur to onchange.  Why?</h1>
</div>

<form id="inputForm">
  <label class="center" for="valueToBeTested">Enter the number:</label>
  <input name="valueToBeTested" type="number" class="center" id="valueToBeTested">
  <div id="outputText"></div>
  <input type="submit" value="calculate" id="triggerButton" class="center">
</form>