catch click event and use validate.js

Question

lets assume i have 2 button in form say button btnA and btnB.I want to validate my form using validate.js I try:

var v = $("#form1").validate({
    ignore: ':hidden',
    rules: {
        if(--btnA is clicked--){
            txtMenuName: { required: true }
        }
        if(--btnB--){

            txtLinkTitle: { required: true },
            txtExternalLink: { required: true }
        }
    },
    messages: {
        txtMenuName: "*",
        review: "*",
        txtLinkTitle: "*",
        txtExternalLink: "*"

    }
});

But i am unable to catch which button is click.Plz help to solve my problem.

I don't have time to write up a proper answer for this, but I think you're going about it wrong way. You need to catch the click events for btnA and btnB and then handle the validation call from within there. You might also have to handle the form's submit event. I'm not familiar enough with validate.js to write up the code for you right now, sorry. — mason81
– mason81, Commented Nov 21, 2011 at 14:13
Also, it would be helpful to know the purpose of having 2 submit buttons in this case... Maybe one button with a radio option would be better? — mason81
– mason81, Commented Nov 21, 2011 at 14:14
@mason81 1st button create menu and store in data base second button create menu item.any idea how to solve.Thanks. — 4b0
– 4b0, Commented Nov 21, 2011 at 14:49
OK, I can see why you might want to use different buttons in that case... Anyway, I put an answer with some example code below. Hopefully that helps. — mason81
– mason81, Commented Nov 21, 2011 at 20:05

mason81 · Accepted Answer · 2011-11-21 20:04:51Z

1

I tried to submit this as an edit to Baszz's answer, but I don't have permission, so here's some example code that should help.

$(function(){
    $('#btnA').click(function(){
        $(this).addClass('clicked');
        $('#btnB').removeClass('clicked');
    });
    $('#btnB').click(function(){
        $(this).addClass('clicked');
        $('#btnA').removeClass('clicked');
    });
});

var v = $("#form1").validate({
    ignore: ':hidden',
    rules: {
        if($('#btnA').hasClass('clicked'){
            txtMenuName: { required: true }
        }
        if($('#btnB').hasClass('clicked'){

            txtLinkTitle: { required: true },
            txtExternalLink: { required: true }
        }
    },
    messages: {
        txtMenuName: "*",
        review: "*",
        txtLinkTitle: "*",
        txtExternalLink: "*"

    }
});

answered Nov 21, 2011 at 20:04

mason81

1,7502 gold badges18 silver badges33 bronze badges

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

Comments

Bas Slagter · Accepted Answer · 2011-11-21 14:11:58Z

0

I assume the buttons triggered the validation in the first place so, you should be able the get the clicked button throught the 'this' variable. Otherwise, add a click event handler to the buttons that toggle a 'clicked' class to the current button, check for the presence of that class in you validation code and you know which button was clicked.

answered Nov 21, 2011 at 14:11

Bas Slagter

9,9479 gold badges51 silver badges81 bronze badges

Collectives™ on Stack Overflow

catch click event and use validate.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related