How to trigger a validation on only Button Click or Input:Submit

Question

I am using Update Panel in my asp page and I am doing JQuery Validation on Asynchronous Postback...

I just want to validate my form on only button clicks or submits... My problem is..all my buttons are in different formviews and won't load at a time...that's why I am unable to take the button id's and use the click events..here is my code..

 Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(ValidateMyForm);
 function ValidateMyForm(sender, args) {
            var objPost = args.get_postBackElement();
            if (objPost === null || objPost === undefined) return;
            if (objPost.id == '<%= ((Button)(formViewinfo.FindControl("btnUpdate"))).ClientID %>') {
                $('#pnlerrors').fadeOut('fast');
                $('#pnlItemErrors').fadeOut('fast');

                var isValid = $('#form1').validate({
                    errorClass: 'error',
                    invalidHandler: function (e, validator) {
                        var errors = validator.numberOfInvalids();
                        if (errors) {
                            $('#pnlerrors').html('<p>&nbsp;Please correct the errors  </p>').fadeIn('fast');
                            document.location.href = '#pnlerrors';
                        }
                    }, submitHandler: function () {

                    }
                }).form();

                if (!isValid) {
                    CancelPostback(sender, args);
                } else {

                }

            }
            //this is for rest of buttons
            else {
                $('#pnlItemErrors').fadeOut('fast');
                $('#pnlerrors').fadeOut('fast');
                var isValid = $('#form1').validate({
                    errorClass: 'error',
                    invalidHandler: function (e, validator) {
                        var errors = validator.numberOfInvalids();
                        if (errors) {
                            $('#pnlerrors').fadeOut('fast');
                            document.location.replace('#', '#pnlItemErrors');
                            $('#pnlItemErrors').html('<p>&nbsp;Please correct the errors </p>').fadeIn('fast');
                            document.location.href = '#pnlItemErrors';
                        }
                    }, submitHandler: function () {
                    }
                }).form();

                if (!isValid) {
                    CancelPostback(sender, args);
                } else {

                }

            }
        }

All I want to do is: 2nd time validation on only button submit not for everything...I do get other postbacks on this page and those post backs also gets validated each time (I want to Avoid this)...

I don't know this approach is good or not...I am struggling with this from long time..I really appreciate you help...

Answer 1

ohh..god finally found the solution for my problem...First of all my apologizes if my question is not clear....

My validation works on asynchronous post backs...I just want validate my form on button clicks..i do have an asp.net grid view in my page..if i click on paging or something on the grid it fires validation...i want avoid this..

for this what i did is...i am capturing the postback element with the following statement.

var objPost = args.get_postBackElement();

then i am checking for type..

if (objpost.type == 'submit') { do validation }
else { don't }..

this ends my 2days struggle... thank you very much your support and help...

Answer 2

Try different approach. Use asp.Net Button with UseSubmitBehavior=true for submission and use asp.Net Button with UserSubmitBehavior=false for buttons that you don't want them to fire the validation process that. add this following code to your form

function ValidateForm()
{   
   var errors ="";
   if (typeof(Page_ClientValidate) == 'function') 
   {
        if (typeof (Page_ClientValidate) == 'function') { Page_ClientValidate();     } 
        if (!Page_IsValid)
        {                        
               for (i = 0; i < Page_Validators.length; i++) {         
                var inputControl = document.getElementById(Page_Validators[i].controltovalidate);               
                if (!Page_Validators[i].isvalid) {                                                        
                    errors = errors + ";" +  Page_Validators[i].errormessage;
                    inputControl.style.border ="solid 2px #FF0000";
                }                        
              }
        }    

        return Page_IsValid;
  }
  return true; 
}

$(document).ready(function(){  
/*********************************************************************/
///handle form submittion and run validation prior to that 
///if a textbox has required field validator, stop form submittion and
/// highlight the text box
/*********************************************************************/                            
  $('#form1').submit(function(){                                                
       return   ValidateForm(); 
       });            

Answer 3

On the assumption that you don't want to submit the form when someone presses the enter button, and that you only want to submit the form on pressing a submit button:

$(document).ready(
    function(){
        $('form').keypress(
            function(event){
                if (event.keyCode == '13'){

                    return false;
                }
            });
        $('input:submit').click(
            function(){
                $(this).closest('form').submit();
            });
        $('form').submit(
            function(){
                $('#success').text('form submitted! (Not really...)');
                return false;
                // Just to stop the error messages
                // in this demo.
            });
    });

There's a JS Fiddle demo, here: http://jsfiddle.net/davidThomas/5PaWz/.

If I'm mistaken in my assumptions, please leave a comment and I'll try to correct myself.

Answer 4

if your problem is just about finding the buttons the need to have validations then one way of getting around this is to add a class to the buttons that you want to trigger validation, for example :

<asp:button id="btn1" cssclass="Validate"/>

then you can grab all these buttons in JQuery:

var buttons = $('.Validate');

get each button id:

$(buttons).each(function(){
   var id = this.id;
});