Jquery validation - Error on adding rules to input element?

Question

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

My design plan:

My input element:

<form action="submit.php" id="form_id">
  <input type="text" class="val-req" id="my_input" name="myval" />
  <input type="button" onclick="validate_form('form_id', function() { $('#form_id').submit(); })" />
  <span id="val-msg" class="my_input"></span>
</form>

Then, on dom ready:

  $(document).ready(function() {
                      $('.val-req').rules('add', {required:true});
                   });

Validate method:

 function validate_form(form_id, callback) {
       var form = $('#'+form_id);
       $('.val-req').each(function() {$(this).rules('add', {required:true});});
       $(form).validate({
                errorElement: "span",
                errorClass:   "val-error",
                validClass:   "val-valid",
                errorPlacement: function(error, element) {
                                      $('#val-msg.'+$(element).attr('id')).innerHTML(error.html());
                               },
                submitHandler: callback
       });
 }

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?

There has been a confusion - that a typo resolved the issue. I deny that. I made the typo while writing the question, which was later corrected - but that was not the issue at all. — Yugal Jindle
– Yugal Jindle, Commented May 19, 2012 at 17:49
The problem is still persisting and I have absolutely no clue what's wrong with my implementation. — Yugal Jindle
– Yugal Jindle, Commented May 19, 2012 at 17:50
@AndrewWhitaker Thanks for the effort sir. Stackoverflow is really a valuable community ! — Yugal Jindle
– Yugal Jindle, Commented May 19, 2012 at 17:50
No problem--I have added an answer that will hopefully help. — Andrew Whitaker
– Andrew Whitaker, Commented May 19, 2012 at 17:56

holamon · Accepted Answer · 2013-04-10 11:52:10Z

18

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

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

answered Apr 10, 2013 at 11:52

holamon

2012 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emmanuel Gleizer Over a year ago

Just had the same problem, forgot to $("#formid").validate()

Andrew Whitaker · Accepted Answer · 2012-05-19 17:53:32Z

1

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/

answered May 19, 2012 at 17:53

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

5 Comments

Yugal Jindle Over a year ago

Hm, but I have a custom submit method that submit values with ajax onclick event of a div button. Plus I don't want require class on my inputs, since I want it to be val-req, and similarly val-email and so on !

Yugal Jindle Over a year ago

I can-not add inline rules in the validation method, since same code will be used to validate 20 forms with n number of fields. If I do that it would actually defeat the purpose.

Andrew Whitaker Over a year ago

@YugalJindle: Ah, okay. In that case you could just add an event handler for "click" on the button and submit the form that way.

Yugal Jindle Over a year ago

I mean I have different forms with different submitting logics, but I will pass those submit methods as callback to this validate_form method, and want to keep the validation independent of the forms themselves.

Yugal Jindle Over a year ago

I am looking to generalize the validation for multiple forms, that's why I need that dynamism.

jonnybradley · Accepted Answer · 2015-06-16 09:48:54Z

1

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

answered Jun 16, 2015 at 9:48

jonnybradley

6405 silver badges6 bronze badges

Comments

Chandrew · Accepted Answer · 2014-08-01 15:48:37Z

0

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/

answered Aug 1, 2014 at 15:48

Chandrew

17.3k4 gold badges26 silver badges40 bronze badges

Collectives™ on Stack Overflow

Jquery validation - Error on adding rules to input element?

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related