jquery validate question

I have a form which is kind of an excel spreadsheet with 650 fields. I need to validate two fields which are required. Also, I want to prevent multiple form submissions by hiding the save button at first click.

I have the following :

$('#btnSave').click(function() {
    $('#formSub').hide();                        
    $('#bidForm').validate({
        rules: {
                vendorName: { required:true }
        },
        messages: {
                vendorName:  "Vendor Name is required!"
        }
    }).form();  

    if ($("#bidForm").valid()) {
        $("#formSub").html('<table style="font-size:11px;"><tr><td><img src="images/ajax-loader.gif" border="0"></td><td>&nbsp;&nbsp;Saving! Please wait...</td></tr></table>');

        var options = {
                success:function() {
                    $("#formSub").html('<input type="button" name="btnBFGoBack" id="btnBFGoBack" class="submitButton btnGoBack" value="Go Back" style="float:left; margin-right:20px;" /><input type="button" name="btnSave" id="btnSave" class="submitButton save" value="Save" style="float:right;" />'); 
                },
                url:'saveForm.cfm'
        };
        $("#bidForm").ajaxSubmit(options);
        return false;
开发者_JAVA百科    }
}); 

i am having couple issues.

1. after i click the save button, it takes almost 4-5 seconds before the "saving! please wait" shows up. I don't understand why

   $("#formSub").html('  Saving! Please wait...'); does not trigger immediately.

2. btnBFGoBack has a click function. After i show the button with $("#formSub").html(), the click function does not work anymore.

Is the validate() having issues since i have so many fields in the form? How can I make sure the save button is hidden, validate my two fields, and show the save button again?

---

Setup the validation op page load, not on the submit handler. Also attach the submit handler through jquery validate. Still seems like a long time for what you are doing. Maybe debug a little in the validate js file and make sure it is not looping all the fields within the form.

$(function(){ // ready
    $('#bidForm').validate({/*options*/
        submitHandler: function(form){
            //send ajax here
        }
    });
})

---

If you have a lot of fields and only want to validate 2 fields with the validate plugin, you can add an "ignore" class which tells the validate plugin that a particular field(s) should not be validated. That should speed up the process and you can still make use of all the other nifty validate plugin features.

---

You shouldn't call validate after click event, but after page is loaded and use submitHandler to send ajax request:

$(document).ready(function(){
    $('#bidForm').validate({
        rules: {
                vendorName: { required:true }
        },
        messages: {
                vendorName:  "Vendor Name is required!"
        },
        submitHandler: function(form) {
            // handler body
        }
    });  
});

Without a testcase it's hard to guess.

---

it wasn't practical to use validation plug-in when i have 600+ formfield and have to validate only 1 or 2 fields. so:

 $('#btnSave').click(function() {
     if ( $('#vendorName').val() == '') {
         $('#vendorErr').html('Please pick a vendor!');
     } else {
        $("#formSub").html('<table style="font-size:11px;"><tr><td><img src="images/ajax-loader.gif" border="0"></td><td>&nbsp;&nbsp;Saving! Please wait...</td></tr></table>');

        var options = {
            success:function() {
                $("#formSub").html('<input type="button" name="btnBFGoBack" id="btnBFGoBack" class="submitButton btnGoBack" value="Go Back" style="float:left; margin-right:20px;" onclick="goBack();" /><input type="button" name="btnSave" id="btnSave" class="submitButton save" value="Save" style="float:right;" />'); 
            },
            url:'saveForm.cfm'
        };
        $("#bidForm").ajaxSubmit(options);

    }
});