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> 

Answer 2

You have a few issues in your code...

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

1. You should not use .valid() within .validate() . Calling .valid() is overkill... .element() validation simply returns a true/false which is all you need in this case, and the this.element() method is how the plugin's internal default function is written.

2. The argument valueToBeTested which is passed into your onfocusout function only generically represents the element being tested... it is not supposed to represent one particular element. In other words, the argument passed into this function only represents the field being evaluated at any particular time... it does not represent a specific field name.

3. The name valueToBeTested that you've used for your field and to declare your rules is misleading because it only represents the name of the field, not the value of anything. Technically functional, semantically misleading.

the user experience is that the validation is onblur the FIRST TIME and then reverts to onchange

4. Technically, it's onkeyup . The validation is "lazy" by default, which is why you only see certain event triggers after the "first time". You've already overridden part of the "lazy" validation with your custom onfocusout function. If you want to disable onkeyup set it to false , otherwise, you can override this function with your own as well.

    $("#inputForm").validate({ onfocusout: function (element) { // <- any "element" being evaluated this.element(element); // <- use '.element()' method }, onkeyup: false, // <- disables all key-up validation rules: { elementName: { // <- NAME of input element required: true, digits: true, minlength: 5, maxlength: 5 } } }); 

DEMO: http://jsfiddle.net/jen8fgts/

Answer 3

Thanks! Adding onkeyup: false,

fixed the code. Also appreciate the style comments.