CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Yugal Jindle
Yugal Jindle

Reputation: 45666

Jquery validation - Error on adding rules to input element?

I am trying to implement Jquery validation with http://docs.jquery.com/Plugins/Validation :

My design plan:

As per my expectations, it should display error message in the place holder span in the form.

But, Problem

Error on Chrome-Console: Uncaught TypeError: Cannot read property 'settings' of undefined

It is also giving error on other browsers. Then, I tried to figure-out the problem and found:

 $('.val-req').rules('add', {required:true});   # This is causing the error

As, per my understanding and documentation -> This should be correct.

Why would this cause the TypeError and what can I do to resolve it?

Upvotes: 19

Views: 22537

Answers (4)

jonnybradley
jonnybradley

Reputation: 640

I was trying to modify the rules on a form that already had validation being set up, but i found my $(document).ready(...) code was executing before the main form validation was set up, so adding a short setTimeout cured this issue for me - e.g.

setTimeout(function() {
    $(yourElement).rules("add", {...})
}, 100);

Upvotes: 1

Chandrew
Chandrew

Reputation: 17277

The culprit is the method delegate(), which does not check whether a validator exists:

function delegate(event) {
  var validator = $.data(this[0].form, "validator"),
  eventType = "on" + event.type.replace(/^validate/, "");
  // this fixes handling the deleted validator:
  if (!validator) return;
  validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
}

I was searching for a solution and found it in a blog post.

Source: http://devio.wordpress.com/2012/07/18/fixing-jquery-validation-with-changing-validators/

Upvotes: 0

holamon
holamon

Reputation: 201

You have to add the rules after you call the validate plugin in the form element:

$("form").validate()
$(yourElement).rules("add", {...})

Upvotes: 18

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

I think your code is more complicated than it needs to be. You should just have to call validate on document ready (assuming your form exists on document ready):

$(document).ready(function() {
    $(".val-req").addClass("required");
    $("#form_id").validate({
        errorElement: "span",
        errorClass: "val-error",
        validClass: "val-valid",
        errorPlacement: function(error, element) {
            $('#val-msg.' + $(element).attr('id')).html(error.html());
        },
        submitHandler: function () {
            this.submit();
        }
    });
});​

Example: http://jsfiddle.net/4vDGM/

You could also just add a class of required to required elements instead of adding them via JavaScript.

Another thing you could do is add rules in the rules object of validate's options:

$(document).ready(function() {
    $("#form_id").validate({
        rules: {
            myval: "required"
        },
        errorElement: "span",
        errorClass: "val-error",
        validClass: "val-valid",
        errorPlacement: function(error, element) {
            $('#val-msg.' + $(element).attr('id')).html(error.html());
        },
        submitHandler: function () {
            this.submit();
        }
    });
});​

Example: http://jsfiddle.net/GsXnJ/

Upvotes: 1

Related Questions