Issue: Onclick triggered after onblur on Mac machines

Question

Hi, We have a couple of textboxes in a form. All of which are validated onblur. The form is submitted onclick of an anchor tag.

<script>
function validateMyText(){
    // do field validation
    // if success
    return true;
    // else {
    alert("Please check the text box value");
    return false;
    }
}
</script>

<form name="myform" action="mytestpage.jsp">
    <input type="text" name="myText" id="myText" onblur="return validateMyText()"/>
    <a href="#" onclick="mytestpage.jsp">Submit</a>
</form>

Windows platform browsers(Firefox, Safari, Chrome, IE): When validateMyText() returns false, onclick is not triggered. This is the expected and existing behaviour.

Mac platform browsers (Firefox, Safari): Even after validateMyText() returns false, onclick event is triggered, which submits the form.

Background: This is a legacy application that was supported only on Windows platform and IE browser. Now it has to be enhanced to work on all the browsers(Firefox, Safari, Chrome, IE) on Windows and Firefox, Safari on Mac.

Thanks, Mathew

Answer 1

If I read this correctly, it looks like the app is relying on the false returned after the blur event of any field with "invalid" data to interrupt the form submission. Baked in, then, is the assumption that any other field that is not focused is valid, you cannot leave a text field without making it valid, and that the only way you'd ever be clicking the anchor tag is while leaving a previously selected text field. A lot of assumptions. The kindest thing to say is that it's brittle -- and what about users hitting Enter?

At minimum, I would create a new function to handle form submission. I don't know what's going on in that anchor tag right now. For clarity, add an ID to your form tag. Then:

<a href="#" onclick="document.getElementById('myform').submit(); return false;">

Now the default click will be suppressed, and you'll run the "natural" submit behavior of the form. Since we want validation before submission, let's add an onsubmit event handler at the form level:

<form name="myform" id="myform" action="mytestpage.jsp" onsubmit="return submitForm();">

Now we'll run through a form-level validation, and return true for submission, false for none. Add something like this to your JavaScript:

function submitForm() {
    // identify fields eligible for validation
    // validate them according to your rules
    // then submit the form
    if( all_your_fields_are_valid ) { // for you to figure out
        return true;
    } else {
        // dialog explaining problem?
        // highlight bad fields?
        return false;
    }
}

You'll still have your field-by-field warnings of invalid data, but now at least you're trapping the form submission explicitly, and looking at the form as an entity with its own overall valid and invalid states. A setup like this should work fine in any reasonably modern browser on any platform.

All that being said, I'd highly recommend adding one of the great JS frameworks. They'll make things much easier, especially if you're looking to clean up and graft behaviors onto lots of existing code.