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...

For clarity, you want to trigger validation only if a submit button was pressed? — David Thomas
– David Thomas, Commented Nov 24, 2010 at 23:16
yes..i want to trigger on button click...if you see my code..i am checking the objargs.id first time with a button id..i have to do it with all other buttons i have ..but the problem is those buttons wont load at time...then are inside an asp.net formview...what i want is..if it is possible i can take a css class for all buttons and then i need check (.btnupdate).click is true then validate otherwise don't..i hope u understand what i am saying..thanks alot.. — Sunny43
– Sunny43, Commented Nov 25, 2010 at 2:44

David Thomas · Accepted Answer · 2010-11-24 23:32:28Z

1

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.

answered Nov 24, 2010 at 23:32

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

4 Comments

Sunny43 Over a year ago

hmm..no..I do have 3 update buttons on my page..i need to validate for these three buttons...since i am using update panel its always validating the page on each partial post back..i don't want to do a validation on each partial post back..just for button clicks...is there anyway to check for if(button.click)== true {validate} else no validation..thanks for you help...

David Thomas Over a year ago

So, only validate on a button-click? If so, what type of buttons are you using? <input type="submit" />, <button type="submit"></button> or some other kind?

Sunny43 Over a year ago

its asp.net buttons..i just want to do it with cssclasss.is it possible? thanks...

David Thomas Over a year ago

@Sunny43, I'm afraid I've little-to-no experience of working, or doing anything much, with asp.net, so I can't really advise on the matter, I'm sorry to say. I'll re-tag your question with 'asp.net' (or similar) to see if anyone more knowledgeable might be able to help.

Ali Tarhini · Accepted Answer · 2010-11-24 23:08:48Z

1

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;
});

edited Nov 24, 2010 at 23:08

answered Nov 24, 2010 at 22:32

Ali Tarhini

5,3686 gold badges45 silver badges66 bronze badges

5 Comments

Sunny43 Over a year ago

I want to check if its a button click then validate... The Below code do a validation on button Id..if I can get the button Id with your code my problem is solved...I don't want to do the Findcontrol() on each formview... Can I get Button Id with CssClass of button...Thanks for your reply.. I want to check objpost.Id = Button Id var objPost = args.get_postBackElement(); if (objPost === null || objPost === undefined) return; if (objPost.id == '<%=((Button)formViewinfo.FindControl("btnUpdate"))).ClientID %>')

Sunny43 Over a year ago

or If I can check If((buttons).click)=true.. also works for me.. Just want to check is there any button is clicked or not..

Ali Tarhini Over a year ago

im not sure if this edit helps, i just showed how to get the button id

Sunny43 Over a year ago

how to check a button click in the form..if its a button click i go ahead do the validation otherwise I don't..thanks for your reply..

Ali Tarhini Over a year ago

did add the validate class on all the buttons?

sjngm · Accepted Answer · 2011-12-21 09:55:38Z

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...

edited Dec 21, 2011 at 9:55

sjngm

13k16 gold badges90 silver badges118 bronze badges

answered Nov 26, 2010 at 1:23

Sunny43

1391 gold badge4 silver badges15 bronze badges

1 Comment

jwheron Over a year ago

You should click the empty check mark next to this answer if this is truly your final solution, and it wouldn't hurt to format your code inside ` marks.

Sid C · Accepted Answer · 2010-11-26 15:36:41Z

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(); 
       });

thanks sid..my solution working fine..and yours also looking good..I will give a try..thanks a lot again...

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

5 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related