Validate Form using Jquery with two submit button

I have a single form and there are 2 submit buttons on that with 3 text boxes. On button A text box 1 should validate and n submit button B the other 2 should validate. I have used submit handler and submitting the form using ajax.

My problem is if I click on A then it doesnt call submit handler of B if B is clicked. Whatever is clicked first then the other method doesnt work.

Please help !

My code looks like below :

function set_new_rate(oid) {
    alert("set_new_rate");
    $("#TestForm").validate({
        event: "custom",
        rules: {
            client_new_rate: {
                required: true,
                number: true
            },
            agent_new_rate: {
                required: true,
                number: true
            }
        },
        messages: {
            client_new_rate: {
                required: "Required",
                number: "Invalid Rate"
            },
            agent_new_rate: {
                required: "Required",
                number: "Invalid Rate"
            }
        },
        submitHandler: function() {
            var client_new_rate = $('#client_new_rate').val();
            var agent_new_rate = $('#agent_new_rate').val();

            var answer = confirm("Set New Rate for this Order?")
            if (answer)
            {
                $.post('http://localhost/fc/index.php/disp/set_new_rate/',{order_id:oid,client_new_rate:client_new_rate,agent_new_rate:agent_new_rate},function开发者_开发百科(data){
                    if(data==1)
                    {
                        $('#rateupdated').html('<div id="display_message" class="msg msg-ok" style="margin:0 0 5px 0px;width:180px;"><p>Rate Updated Successfully!</p></div>');
                        $("#rateupdated").fadeIn(0).fadeOut(5000);
                        $('#rec_ord_cnt_prc'+oid).html(client_new_rate);
                        $('#client_old_rate').html(client_new_rate);
                        $('#agent_old_rate').html(agent_new_rate);
                        $('#client_new_rate').val('');
                        $('#agent_new_rate').val('');
                    }
                });
            }
        }
    });
}

function add_note(oid) 
{
    alert("add_note");

    $("#TestForm").validate({
        event: "custom",
        rules: {
            note_description: {
                required: true
            }
        },
        messages: {
            note_description: {
                required: "Required"
            }
        },
        submitHandler: function() {
            alert("add_note _ sh");
            var note_description = $('#note_description').val();
            var note_type = $('input:radio[name=note_type]:checked').val();
            var answer = confirm("Add this "+note_type+" Note?")
            if (answer)
            {
                $.post('http://localhost/fc/index.php/disp/add_note/',{order_id:oid,note_description:note_description,note_type:note_type},function(data){
                    if(data==1)
                    {
                        $('#noteadded').html('<div id="display_message" class="msg msg-ok" style="margin:5px 5px 5px 0px;width:282px;"><p>Note Added Successfully!</p></div>');
                        $('#note_description').val('');
                        $("#noteadded").fadeIn(0).fadeOut(5000);
                    }                            
                });
            }
        }
    });
}

I am using Jquery Validate Plugin.

What about using the jquery built in event handle instead of the submitHandler call.

$('.MyForm .set_rate').click(function(e){
   set_new_rate(oid);
   //here your submitHandler call function
});

$('.MyForm .add_note').click(function(e){
   add_note(oid);
   //here your submitHandler call function
});

(I tried to copy the function but the textarea gave me error. In your functions just delet the submitHandler in both cases.