Ho do I bypass aui-form-validation if 3 submit inputs exist in a form?

[darkgo]

Hi all,

I think the subject explains it all. Essentially I have a form that has 3 input type=submit (next, back and cancel). The problem being that all 3 validate the form as they are all submit buttons, and I can't change their types. Is there any way to sort this out. I have a jsfiddle to show this problem: http://jsfiddle.net/0yak4z07/10/

Thanks to everyone that may jump in and help.

// AUI Form validator for CSS Class

YUI().use('aui-form-validator', function (Y) {

    var rules = {

        _mine_WAR_portlet_dd: {

            required: true,

            digits: true,

            maxLength: 2,

            range: [1, 31]

        },

        _mine_WAR_portlet_mm: {

            required: true,

            digits: true,

            maxLength: 2,

            range: [1, 12]

        },

        _mine_WAR_portlet_yyyy: {

            required: true,

            digits: true,

            maxLength: 4,

            range: [1900, 2014]

        },

    };

    var fieldStrings = {

        _mine_WAR_portlet_dd: {

            required: 'Required',

        },

        _mine_WAR_portlet_mm: {

            required: 'Required',

        },

        _mine_WAR_portlet_yyyy: {

            required: 'Required',

        }

    };

    var form = Y.one('.formValidator');

    if (form != null && form != '' && form != undefined) {

        new Y.FormValidator({

            boundingBox: '.formValidator',

            fieldStrings: fieldStrings,

            rules: rules

        });

    }

});

[Maíra Bello]

Hey,

I understand your problem. This happens because we listen to the 'submit' event, which is fired on the form when one of its submit inputs is clicked.

So, one thing that should work for you is to prevent this event from triggering for the inputs that shouldn't submit the form, which should be the desirable behavior for you anyway. A simple way to do this is to listen for clicks on those inputs and call `event.preventDefault()`. This way the `submit` event won't be triggered, and so your form won't be sent and the validation won't happen either.

Let me know if that helped or if you need more info.

[darkgo]

Hi Maira, I tried what you suggested but the preventDefault is not submitting the form, thus not sending data to my controller. I need to bypass the validation and still submit the form. I was trying to figure out a way reading the API but I'm not skilled at javascript. :)

[Maíra Bello]

That's weird, why would you want to submit the form without the validation? I thought that you had more than one submit input, but only wanted one of them to submit the form. In your example you have a 'Cancel' input for example, which seems like it shouldn't send the form, just cancel everything instead. What is the use case that you're working on?

If you really need to send unvalidated form data to the server though, you can listen to the `validateField` event and prevent it when it shouldn't validate. To know if you should validate or not you can listen to clicks on your inputs and store in a variable if the clicked input is one that should do validation or not. I've updated your fiddle to show what I mean, and it works as it should: http://jsfiddle.net/0yak4z07/15/.