jquery validate plugin validate single form depending on submit input clicked

Question

I have a single form and 3 input type submit buttons: back, send, search. The "back" should not validate the form and take me back, the "send" should validate only the email field, the "search" should validate first name, last name and postcode. I have been working on this but to me the update/assign rules part seems a bit verbose. Maybe there's a way to do it better. I have a working jsfiddle: http://jsfiddle.net/1u7tb48L/ And this is my javascript:

$("#formValConfirmIdEmail").validate({
        debug: true,
        rules: {
            emailLogin: {
                required: true
            },
            firstName: {
                required: true
            },
            lastName: {
                required: true
            },
            postCode: {
                required: true
            }
        },
        messages: {
            emailLogin: {
                required: 'Required'
            },
            firstName: {
                required: 'Required'
            },
            lastName: {
                required: 'Required'
            },
            postCode: {
                required: 'Required'
            }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        }
    });
// Update rules for send button
$('#formValConfirmIdEmail #sendBtn').on('click', function () {
    $('#emailLogin').rules('add', {
        required: true
    });
    $('#firstName').rules('remove');
    $('#lastName').rules('remove');
    $('#postCode').rules('remove');
    $('#firstName, #lastName, #postCode').closest('.control-group').removeClass('error');
    $('#formValConfirmIdEmail').valid();
});

// Update rules for search button
$('#formValConfirmIdEmail #searchBtn').on('click', function () {
    $('#firstName').rules('add', {
        required: true
    });
    $('#lastName').rules('add', {
        required: true
    });
    $('#postCode').rules('add', {
        required: true
    });
    $('#emailLogin').rules('remove');
    $('#emailLogin').closest('.control-group').removeClass('error');
    $('#formValConfirmIdEmail').valid();
});

Thanks for your help!

You've described your requirements but you have not explained the problem. If you're just asking about an alternative way to do this, then not really. There is no other way to toggle validation than to add and remove rules using the rules() method. — Sparky
– Sparky, Commented Jan 21, 2015 at 16:47
You could use a jQuery .each() and combine the selectors a bit: jsfiddle.net/1u7tb48L/2 — Sparky
– Sparky, Commented Jan 21, 2015 at 16:52
Yes, I was thinking on using each(). I tried using an array where I store all elements and then use each(),but it only works on the first element of the array. Strangeee — Adorablepolak
– Adorablepolak, Commented Jan 21, 2015 at 17:00
Not strange; it's somewhat documented. When using any of this plugin's methods, only the first matched element is considered. So the workaround is to use an .each(). Examine my jsFiddle. — Sparky
– Sparky, Commented Jan 21, 2015 at 17:02

Sparky · Accepted Answer · 2015-01-21 17:39:33Z

Use the .rules() methods and when the selector contains multiple elements, wrap it inside of a jQuery .each().

$('#formValConfirmIdEmail #sendBtn').on('click', function () {
    $('#emailLogin').rules('add', 'required');
    $('#firstName, #lastName, #postCode').each(function () {
        $(this).rules('remove');
    });
    $('#firstName, #lastName, #postCode').closest('.control-group').removeClass('error');
    $('#formValConfirmIdEmail').valid();
});

DEMO: http://jsfiddle.net/1u7tb48L/4/

Since it's just a simply boolean rule, declare it using class="required" and add/remove the class instead of using the .rules() method.

$('#formValConfirmIdEmail #sendBtn').on('click', function () {
    $('#emailLogin').addClass('required');
    $('#firstName, #lastName, #postCode').removeClass('required').closest('.control-group').removeClass('error');
    $('#formValConfirmIdEmail').valid();
});

DEMO: http://jsfiddle.net/1u7tb48L/7/

NOTE: Your errorPlacement function is a bit superfluous as error.insertAfter(element) is already the default. Remove it entirely and the behavior is exactly the same.

Collectives™ on Stack Overflow

jquery validate plugin validate single form depending on submit input clicked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related