即使JavaScript验证返回false，JSP表单仍会提交

Question

I have a JSP with the form "deleteCont" and a javascript file with the function "validateDelete". When I click the "Delete contact" button the "validateDelete" function is successfully called and the alert with the "alertmessage" is displayed. However, the "ContactMaint" servlet is still called even though false is being returned. Please can someone tell me where I am going wrong?

<form name="deleteCont"
    onsubmit="return validateDelete('${sessionScope.account}','${sessionScope.firstname}', '${sessionScope.lastname}')" 
    action="ContactMaint" method="post">
    <input type="submit" value="Delete contact" name="delContact">
</form>   



function validateDelete(account, contactFirstName, contactLastName) {
    urlstrg = "http://localhost:8080/SalesPoliticalMapping/JCheckContacts?account=" +
        account + "&firstname=" + contactFirstName + "&lastname=" + contactLastName;
    $.get(urlstrg, function (result, status) {
        if (result.length > 0) {
            var alertmessage = "Can't delect contact:";
            for (var i = 0; i < result.length; i++) {
                alertmessage += result[i];
            }
            alert(alertmessage);
            return false;
        }
    });
}

I have now amended my code as follows although I'm not entirely sure why:

function validateDelete(account, contactFirstName, contactLastName) {
$.ajaxSetup({async: false});
urlstrg = "http://localhost:8080/SalesPoliticalMapping/JCheckContacts?account=" +  account + "&firstname=" + contactFirstName + "&lastname=" + contactLastName;

var valid = true;
var alertmessage = "";

$.get(urlstrg, function(result, status) {
   if (result.length > 0) {
   valid = false;    
   alertmessage = "Can't delect contact:";
   for (var i = 0; i < result.length; i++) {
       alertmessage += result[i];
        }
   }
 });

 if (valid===false) {
     alert(alertmessage);
 return false;}
 };

Answer 1

There are 2 problems:

1. You're firing an ajax request. Ajax requests are by default asynchronous. Immediately after the $.get() called, the code advances to the next line while the asynchronous request runs in the background in a completely different thread. As there's in your case apparently nothing after the $.get() , it immediately returns (implicitly as true ).

2. You're returning from a callback function, not from the main function. The callback function only returns into the main function, not outside. You need to return from the main function.

One way is to always return false and explicitly submit the form on success.

function validateDelete(...) {
    var $form = $(this);

    $.get(..., function(...) {

        if (success) {
            $form.submit();
        }
    });

    return false;
}

Another way is making the ajax request asynchronous by passing { async: false } option as 2nd argument of $.get() .

function validateDelete(...) {
    var valid = false;

    $.get(..., { async: true }, function(...) {

        if (success) {
            valid = true;
        }
    });

    return valid;
}

---

Please note that this problem has completely nothing to do with JSP. You'd still have had exactly the same problem when using the same script in another view technology, such as PHP, ASP, etc, and even in a plain HTML page. JSP is in the context of this question merely a HTML code generator and can better be omitted from the question in future problems with specifically HTML+CSS+JS/jQuery.