How do I prevent my onclick from continuing to execute?

I have tied a java script function to a custom validator.  I've also attempted to wire the function to fire when a button is clicked, and that appears to work when I step through my code. What I'm attempting to do, is to stop the processing of the code, in my on click event, if the validation fails. For example, in this case, if the value entered is less than or equal to 3 digits in length then I want the page to display an alert saying so, but I also want the code in the on click event to stop at that point. How do I achieve this?

javascript:

                            function ValidateSearchTxt(source, args)
            {
                args.IsValid = true;
                var val = args.Value;
                $("#cmdSearch").click(function () {
                    if (!(isNaN(val)))
                    {
                        if (val.length <= 3) {

                            alert('<%Response.Write(GetDisplayString("text.donors.ePassportScheduledEventList.VldSearchTxt"));%>');
                            args.IsValid = false;
                        }
                        else {
                            args.IsValid = true;
                        }
                    }
                });
            }

HTML:

 <asp:CustomValidator runat="server" ID="vldSearchTxt" Display="None" ControlToValidate="txtSearchText"  ClientValidationFunction="ValidateSearchTxt" ErrorMessage="vldSearchTxt" />

C#:
        protected void cmdSearch_OnClick(object sender, EventArgs e)
        {
             //IF THE VALIDATION IS FALSE, STOP
             //ELSE DO SOMETHING...
        }
LVL 1
Michael SterlingWeb Applications DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Eddie ShipmanAll-around developerCommented:
$("#cmdSearch").click(function (e) {
    e.preventDefault;
   .
   .
   .
}

Open in new window

0
Jan LouwerensSoftware EngineerCommented:
Eddie's answer is correct. Just one minor clarification: preventDefault is a method, so it would be called like
e.preventDefault();

Open in new window

0
Eddie ShipmanAll-around developerCommented:
Yes, I was in a hurry... ;--)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Michael SterlingWeb Applications DeveloperAuthor Commented:
Well it did work, but too well. It won't allow the rest of the code to execute even if the value passes all of the criteria and it is also displaying the alert, multiple times. Any thoughts? I tried moving the method inside the if statement.

            function ValidateSearchTxt(source, args)
            {                
                args.IsValid = true;
                var val = args.Value;
                $("#cmdSearch").click(function (e) {
                   
                    if (!(isNaN(val)))
                    {
                        if (val.length <= 3) {
                            alert('<%Response.Write(GetDisplayString("text.donors.ePassportScheduledEventList.VldSearchTxt"));%>');
                            args.IsValid = false;
                            e.preventDefault();
                        }
                        else {
                            args.IsValid = true;
                        }
                    }
                });
            }
0
Eddie ShipmanAll-around developerCommented:
This is how you need to fix this:
$( document ).ready(function() {
    $("#cmdSearch").click(function (e) {       
        e.preventDefault();
        if (!(isNaN(val)))
        {
            if (val.length <= 3) {
                alert('<%Response.Write(GetDisplayString("text.donors.ePassportScheduledEventList.VldSearchTxt"));%>');
                args.IsValid = false;
            }
            else {
                args.IsValid = true;
            }
        }
    });
});



function ValidateSearchTxt(source, args)
{                
    args.IsValid = true;
    var val = args.Value;
    $("#cmdSearch").trigger('click');
}

Open in new window

0
Michael SterlingWeb Applications DeveloperAuthor Commented:
It doesn't know what val is in the .click event of the button...i'm getting val is not defined...
0
Eddie ShipmanAll-around developerCommented:
How is ValidateSearchTxt called? Where is the val coming from?
0
Michael SterlingWeb Applications DeveloperAuthor Commented:
ValidateSearchTxt is getting called when the user clicks a search button. Its value  should be the text within the text box with the ID of "txtSearchText"
0
Eddie ShipmanAll-around developerCommented:
Well, from looking at your original post, you seem to be trying to validate on the server side and also trying to do it client-side.
Those two approaches won't work in the manner you are attempting. I would get rid of the asp:CustomValidator and go with the client-side approach where you can skip the ValidateSearchText function altogether.

The ID of the search input is "txtSearchText" and, you can set the value in the VldSearchTxt box the same way.

Change the function like this:
$( document ).ready(function() {
    $("#cmdSearch").click(function (e) {       
        var val = $("#txtSearchText").val();
        e.preventDefault();
        if (!(isNaN(val)))
        {
            if (val.length <= 3) {
                // do you really need this alert?
                // alert('<%Response.Write(GetDisplayString("text.donors.ePassportScheduledEventList.VldSearchTxt"));%>');
                $("#VldSearchTxt").Html("Error Message");
            }
            else {
                $("#VldSearchTxt").Html(""); // clear the error message when validated.
            }
        }
    });
});

Open in new window

0
Michael SterlingWeb Applications DeveloperAuthor Commented:
I believe you are correct about trying to validate on both sides, I will double check with my customer but I think they do want a validation of correct input on the client side, then, a validation of the data (against their business logic/rules) on the server side. Is this possible? Aside from that, they did want the pop-up message (the alert) to show for the user.
0
Eddie ShipmanAll-around developerCommented:
Looking at the code, it seems like you're trying to validate something that you don't really need to go back to the server to validate. So why wouldn't just client-side-validation work?
1
Eddie ShipmanAll-around developerCommented:
That being said, I have never used the CustomValidator before but I found this that may give you some insight:
http://www.dotnetcurry.com/ShowArticle.aspx?ID=299

It is closer to your desired behavior.
1
Michael SterlingWeb Applications DeveloperAuthor Commented:
I wound up solving it, but to answer the question, "So why wouldn't just client-side-validation work?": Client-side validation will work, for part of the validation. The further validation will [need to] be done on the server. The client said will "scrub" the entry for correctness in the sense of it will check for some minimal entry requirements. After that, the business logic/rules will be applied on the server level to complete the validation. My solution is below.

javascript:

            function ValidateSearchTxt(source, args) {
                args.IsValid = true;
                var val = $('#txtSearchText').val();
                if (!(isNaN(val))) {
                    if (val.length <= 3) {
                        alert("<%=GetDisplayString("text.donors.ePassportScheduledEventList.VldSearchTxt")%>");
                        args.IsValid = false;
                    }
                }
            }

HTML:

<asp:CustomValidator runat="server" ID="vldSearchTxt" Display="None" ClientValidationFunction="ValidateSearchTxt" ErrorMessage="vldSearchTxt" />

C#:
        protected void cmdSearch_OnClick(object sender, EventArgs e)
        {
            //IF THE VALIDATION RULES HAVE BEEN BROKEN, THEN BOUNCE OUT, OTHERWISE CONTINUE.
            if (!IsValid)
                return;
           
        }
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eddie ShipmanAll-around developerCommented:
Yeah, I thought using JQuery to handle the click of the button was the ultimate culprit, here.
1
Michael SterlingWeb Applications DeveloperAuthor Commented:
It solved my problem.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.