CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Toontje
Toontje

Reputation: 1485

jQuery.validate only triggers on submit in my Rails App

I'm trying to integrate the jQuery Validate plugin into my Rails app:

<script>
$(function() {
      $("#edit_researcher").validate({
        debug: false,
        rules: {
          "researcher[first_name]": {required: true},
          "researcher[email]": {required: true, email: true}
        },
        messages: {
          "researcher[first_name]": { required: "First name is required" },
          "researcher[email]": {
          required: "Email is required",
          email: "Your email address must be in the format of [email protected]"
          }
        }
    });
</script>

This is working, but the problem is that the .validate method is only triggered when the submit button is clicked. I would like to have it triggered at onfocus and onblur, as I believe is the default for jQuery.validate().

Does anyone encountered the same issue when implement jQuery.validate() in a Rails app?

How can I make it trigger the validation on onfocus and onblur?

Upvotes: 0

Views: 72

Answers (1)

Sparky
Sparky

Reputation: 98738

Quote OP:

"... the problem is that the .validate method is only triggered when the submit button is clicked. I would like to have it triggered at onfocus and onblur, as I believe is the default for jQuery.validate()."

There are no such events in this plugin as onfocus and onblur. Actually, the default behaviors are onfocusout and onkeyup. HOWEVER, these two behaviors only start working after an initial click of the submit button.

Your existing code: http://jsfiddle.net/bu7ukmvy/

This default behavior is called "Lazy Validation" as opposed to "Eager Validation", which is what you seem to be requesting.

You can modify the onfocusout and onkeyup callback functions to ignore if the user already clicked the submit button and instead have them get triggered upon the first blur and key-up.

$("#edit_researcher").validate({
    // rules & options,
    ....,
    onfocusout: function (element) {
        this.element(element);
    },
    onkeyup: function (element, event) {
        this.element(element);
    }
});

Working DEMO: http://jsfiddle.net/bu7ukmvy/1/

Upvotes: 1

Related Questions