jQuery Validation plugin. Add new rules to existing

Question

I have project where I use jQuery validation. Here is my code:

<script type="text/javascript" src="Scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
<form action="/" id="MyForm" onsubmit="greeting()">
    <input type="checkbox" value="val1"  name="dner" />
    <input type="submit" value="Submit" />
</form>
<script type="text/javascript">
function greeting() {
    return $("#MyForm").valid();
}
$(document).ready(function () {
    $("#MyForm").validate({ onsubmit: true }); //If comment this code line, it work!!!
    $.validator.addMethod("MyFunction", function (value, element) {
        if ($("input:checked").length > 0) { return true } else { alert("Пустое поле"); return false; }
    },
    "");
    $("#MyForm").rules("add", { dner:{ MyFunction :true}});
});
</script>

It work, when I comment one line of code. It is very important, because in my project I have a set new rules for validation, and I can't remake it. How I can add new rules to existing rules?

Answer 1

Your code:

//If comment this code line, it work!!!
$("#MyForm").validate({ onsubmit: true }); 

If you comment out that entire line, you'll remove the initialization method of the plugin!

It's a moot point since your code is not working in either case. See here or here.

You'll have to rectify the following issues:

---

1) onsubmit: true is already the default behavior, so by setting it to true, you break the plugin. Just leave this option out if you want validation to occur upon clicking the submit button.

See documentation for onsubmit:

onsubmit (default: true):
Validate the form on submit. Set to false to use only other events for validation. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.

---

2) Your code: $("#MyForm").rules("add"....

You are not supposed to attach the .rules() method to the form. You attach it only to a field element...

$('input[name="dner"]').rules("add", {
    MyFunction: true
});

See documentation.

To apply this method to several fields at once, use the jQuery .each()...

$('input[type="checkbox"]').each(function() {
    $(this).rules("add", {
        MyFunction: true
    });
});

---

3) You do not need an inline submit handler: onsubmit="greeting()". Inline JavaScript is wholly unnecessary when using jQuery. Besides, a submit handler will interfere with the plugin's built-in submit handler. If you need to execute something upon the submit event when using this plugin, use the submitHandler callback function...

submitHandler: function(form) {
    // fire this code when a valid form is submitted
    return false;  // prevent default form action, e.g. when using ajax()
}

If you need to fire code when the form is not valid, use the invalidHandler callback...

invalidHandler: function(event, validator) {
    // fire this code when an invalid form is submitted
}

See documentation for examples.

---

4) Your custom method can be condensed...

$.validator.addMethod("MyFunction", function (value, element) {
   return ($("input:checked").length > 0) 
}, "Пустое поле");

If you'd rather use an alert() than the label message, you can put that back. Although I don't recommend using an alert() as part of any modern design.

---

DEMO with all changes applied: http://jsfiddle.net/sqKta/