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(func
if (!(isNaN(val)))
{
if (val.length <= 3) {
alert('<%Response.Write(Ge
args.IsValid = false;
}
else {
args.IsValid = true;
}
}
});
}
HTML:
<asp:CustomValidator runat="server" ID="vldSearchTxt" Display="None" ControlToValidate="txtSear
C#:
protected void cmdSearch_OnClick(object sender, EventArgs e)
{
//IF THE VALIDATION IS FALSE, STOP
//ELSE DO SOMETHING...
}
javascript:
function ValidateSearchTxt(source, args)
{
args.IsValid = true;
var val = args.Value;
$("#cmdSearch").click(func
if (!(isNaN(val)))
{
if (val.length <= 3) {
alert('<%Response.Write(Ge
args.IsValid = false;
}
else {
args.IsValid = true;
}
}
});
}
HTML:
<asp:CustomValidator runat="server" ID="vldSearchTxt" Display="None" ControlToValidate="txtSear
C#:
protected void cmdSearch_OnClick(object sender, EventArgs e)
{
//IF THE VALIDATION IS FALSE, STOP
//ELSE DO SOMETHING...
}
Eddie's answer is correct. Just one minor clarification: preventDefault is a method, so it would be called like
e.preventDefault();
Yes, I was in a hurry... ;--)
ASKER
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(func
if (!(isNaN(val)))
{
if (val.length <= 3) {
alert('<%Response.Write(Ge
args.IsValid = false;
e.preventDefault();
}
else {
args.IsValid = true;
}
}
});
}
function ValidateSearchTxt(source, args)
{
args.IsValid = true;
var val = args.Value;
$("#cmdSearch").click(func
if (!(isNaN(val)))
{
if (val.length <= 3) {
alert('<%Response.Write(Ge
args.IsValid = false;
e.preventDefault();
}
else {
args.IsValid = true;
}
}
});
}
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');
}ASKER
It doesn't know what val is in the .click event of the button...i'm getting val is not defined...
How is ValidateSearchTxt called? Where is the val coming from?
ASKER
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"
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:
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.
}
}
});
});ASKER
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.
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?
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.
http://www.dotnetcurry.com/ShowArticle.aspx?ID=299
It is closer to your desired behavior.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Yeah, I thought using JQuery to handle the click of the button was the ultimate culprit, here.
ASKER
It solved my problem.
Open in new window