Jquery验证 - 向输入元素添加规则时出错？

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?

Answer 1

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

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

Answer 2

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/

Answer 3

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 - eg

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

Answer 4

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/