Is it possible cancel a JavaScript event from another event?

Question

I would like to know, is it possible to cancel the next JavaScript event in the queue from another event?

Problem:

I have two ASP.Net controls,
Age - TextBox
Save - Button

There are two JavaScript validation functions,
ValidateAge() - checks for Valid age (0 >= Age <= 140), provides an alert if invalid
ValidatePage() - checks for all the required fields in the page and saves if all the required fields are filled in

<asp:TextBox ID="txtAge" TabIndex="1" DataType = "String" runat="server" MaxLength="50" CssClass="textBox" Style="width: 150px" CausesValidation="true" onblur="return ValidateAge();"></asp:TextBox>

and there is an access key defined for button,

<asp:Button ID="btnSave"  AccessKey="S" AssociatedControlID="btnSave" TabIndex="1" runat="server" CssClass="ButtonSaveNew" onclick="return ValidatePage();"></asp:Button>

Now if I press Alt+S with an invalid age in the Age field first the onblur of Age gets called (as I have set the AssociatedControlID) and then the onclickof the save button is called.

Now what happens is that irrespective of the age is valid or invalid the save gets executed.

I need to cancel the onclick event of button from the onblur event of the textbox, if the age is not valid.

score 2 · Accepted Answer · answered Jul 19 '12 at 10:46

What is probably happening is that your form is submitting, and thus the button isn't actually firing the onclick event (since it's not being clicked as such!). You'll likely notice the same behaviour if you hit enter within one of the form fields (even with the txtAge field!), as this also causes a form submit.

The easiest thing to do in this case is register the ValidatePage function as a handler for the submit event on the form:

<form onsubmit="ValidatePage()">

Though i appreciate you're using WebForms and thus it's likely this will be difficult. Whenever i've done client-side validation in WebForms I've always relied on the jQuery.validation plugin. If you're already reliant on jQuery this provides a very neat model to do validation. It doesn't play well with WebForms out of the box and you need to do a little playing around to get it working. Dave Ward's post here will likely be of help: http://encosia.com/using-jquery-validation-with-asp-net-webforms/

I heavily recommend both jQuery and the validation plugin. jQuery will remove issues dealing with inconsistencies of events in different browsers and the validation plugin is immensely customisable (note: you usually don't have to write code, just supply it with a configuration object) and handles all the blur/submit stuff seamlessly. It will save you massive amounts of time for a form of any complexity — WickyNilliams, Jul 19 '12 at 15:08
Hi arun, please consider marking my response as the answer if this helped you. How did you get on with this in the end? — WickyNilliams, Aug 03 '12 at 16:24

score 1 · Answer 2 · edited May 23 '17 at 10:34

1

Is it possible cancel a java script event from another event?

No, generally it is not. Also, the blur event can't be canceled, and according to how to prevent blur() running when clicking a link in jQuery? it is complicated to hold the focus.

Yet, I don't think holding the focus when the user tries to leave a element (and focus the next input) is very userfriendly - only show a validation fail for the leaved input. The only event you really should prevent is submit, when validation has failed, and you then could focus the first invalid field.

var ageValid;
$("#txtAge").change(function validateAge(e) {
    if(!isNaN(this.value) && this.value >= 0) {
        ageValid = true;
    } else {
        $(this).addClass("invalid");
        ageValid = false;
    }
}).change();
$("#formid").submit(function validatePage(e) {
    // maybe calls to the single validation functions?
    if (! ageValid) {
        e.preventDefault();
        $("#txtAge").focus();
        return false;
    }
});

edited May 23 '17 at 10:34

Community

1
1

answered Jul 19 '12 at 11:09

Bergi

630,263
148
957
1,375

thank you.. actually i have a lot of validations to do.. so i was eager to find if there is any way to cancel the event with out calling the validation functions from the validatepage... – arun.v1 Jul 19 '12 at 12:00
I think calling them there (again) is the best way. Can you always be sure they would have been triggered independently? – Bergi Jul 19 '12 at 12:16
yes I agree that calling them again is best. But we am introducing the AccessKey functionality in the application now only. Till now the validations are done separately in 'onblur' of the controls. So it was not a problem before accesskey was used. Thought of finding a fix with less code changes. – arun.v1 Jul 19 '12 at 12:30
What happened in your application before the acceesskeys were introduced, when you clicked on the "Save" button while an invalid age was entered? – Bergi Jul 19 '12 at 12:37
when we click on save the onblur event will be executed first and if it returns false, the click event wont be started at all... i am not sure why in this case the click event gets called.. – arun.v1 Jul 19 '12 at 12:41

Is it possible cancel a JavaScript event from another event?

2 Answers2