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?

Sparky · Accepted Answer · 2013-09-25 19:01:06Z

6

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/

edited Sep 25, 2013 at 19:01

answered Sep 25, 2013 at 17:39

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

6 Comments

higgs.boson Over a year ago

You suggested. $('input[name="dner"]').rules("add", { MyFunction: true }); Can I implement rule function to not input field? Because I have several checkboxes, and I want to check this is group of checkbox.

Sparky Over a year ago

@higgs.boson, a checkbox is an input field. See my edited answer where I show how you can use .rules('add') on multiple elements at once.

higgs.boson Over a year ago

I want to check whether the selected at least one item in the group of checkbox. How can I do that?

Sparky Over a year ago

@higgs.boson, you never mentioned anything about this in your OP. However, you can include the additional-methods.js file and use the require_from_group method. The instructions are embedded in the code comments of that file. See this answer: stackoverflow.com/a/18994248/594235

higgs.boson Over a year ago

my project very large and I posted only important moment. Is there easy way to make an easy validate of several fields? Thank you very much anyway!!!!!

|

Collectives™ on Stack Overflow

jQuery Validation plugin. Add new rules to existing

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related