JQuery Validation including rules dynamically

Question

I am looking for a way to include the jquery validation rules dynamically, because I need to use them in different places.

The user can edit for example a news in two ways. The first way is a usual form with jquery validation. This is no problem, its all working fine. But I also want to use the jquery validation with jeditable without repeating my rules.

So at the moment I have a NewsValidator.js like this:

$("form").validate({

rules: {
        title: {
                required: true,
        rangelength:[3,50],
                },
        content: {
                required: true,
                rangelength: [25, 250]
                }
        },
});

And my code for the jeditable field looks like this:

$('.edit').editable('http://localhost/news/ajax', { 
        'id': 'news_id',
        'name':'title',
        'method': 'put',
        submitdata : {
                        _method: "PUT",
                        content: $("div.content").text(),

                    },

 error: function(){
    alert('Something went wrong');
 },
 onsubmit: function(settings, td) {
    $.getScript('../../js/validation/NewsValidator.js'); //-> this is not working (unexspected ) )

}

});

So does anyone know how I can use my validator inside the onsubmit function without copy&paste to keep it DRY?

Thanks in advance.

Load the script unconditionally to get the validation configured, and use if ($("form").valid()) in the onsubmit handler. — Barmar
– Barmar, Commented Jun 13, 2014 at 14:41
What do you mean with unconditionally? Can you please explain it or give an example? — Marco
– Marco, Commented Jun 13, 2014 at 18:07
You're currently loading the script using $.getScript only after the user submits something. I suggest you just add <script src="../../js/validation/newsValidator.js"> to the page, so it loads always. — Barmar
– Barmar, Commented Jun 13, 2014 at 19:09
Maybe it was too late yesterday or too obvious. Anyway, this doesn't work for me. The newsvalidator is never called. And if I try to change the function of news validator to $(this).validate() I get an exception: Cannot read properties of undefined. — Marco
– Marco, Commented Jun 14, 2014 at 10:32
$(this).validate() does not even make any sense in the context of the code you've shown us. And you cannot call .validate() multiple times on the same form. It's called once on DOM ready to initialize the plugin on your form, and any subsequent calls are ignored. In other words, you cannot repeat .validate() even if you wanted. That's why the developer provides methods such as .rules('add') in order to dynamically manipulate the setup. — Sparky
– Sparky, Commented Jun 15, 2014 at 22:52

Sparky · Accepted Answer · 2018-06-12 15:58:20Z

3

Quote OP:

"I am looking for a way to include the jquery validation rules dynamically"

The only way to add, change, or remove the rules dynamically is by using the .rules() methods.

.rules('add') to dynamically add new rule(s) or over-write existing rule(s).

.rules('remove') to dynamically remove existing rule(s).

Examples:

$('#myField').rules('add', {  // <- a single field
    required: true, 
    digits: true
});

$('.manyFields').each(function() {  // <- multiple fields at once needs '.each()'
    $(this).rules('add', {
        required: true, 
        digits: true
    });
});

$('#myField').rules('add', {  // <- a single field with custom messages
    required: true, 
    digits: true,
    messages: {
        required: "this field is mandatory",
        digits: "this field can only contain digits"
    }
});

EDIT:

The .validate() method is what's used to initialize the plugin on your form. It's called once on DOM ready to initialize the plugin on your form, and any subsequent calls are ignored. In other words, you cannot repeat .validate() even if you wanted. That's why the developer provides methods such as .rules('add') in order to dynamically manipulate the setup.

Since it's actually impossible to repeat the .validate() method, where you're repeating any code is entirely unclear.

edited Jun 12, 2018 at 15:58

answered Jun 13, 2014 at 23:50

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

6 Comments

Marco Over a year ago

I know this, but than I have to repeat myself. I only want to declare the rules for the news once and use them in both cases (normal form and jeditable page)

Sparky Over a year ago

@MarcoMartens, what you're trying to do is not clear. Yes, we know you don't want to repeat any code. However, you cannot just load an external JavaScript file dynamically like that... JavaScript is typically loaded when the page loads. Otherwise, to dynamically manipulate the page, you must use the methods provided by the plugin developer such as I've shown in my answer.

Sparky Over a year ago

@MarcoMartens, also see my edit. You've not shown or explained enough, but for what little you've shown, it is not possible.

Marco Over a year ago

I am a beginner at js, so I thought there is a way to include the rules or something. I didn't know that the validate function can only initialized once, so that was the point. I will try to implement it as you said in your answer. Thanks for your help.

jvk Over a year ago

@Sparky, how to change default error message to add rules?

|

Collectives™ on Stack Overflow

JQuery Validation including rules dynamically

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related