JSP form still submitting even though JavaScript validation returning false

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;}
 };

return false should be outside $.get() [in the scope of validateDelete]. — TJ-
– TJ-, Commented Aug 18, 2014 at 20:21

BalusC · Accepted Answer · 2014-08-19 06:51:03Z

2

There are 2 problems:

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).
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.

edited Aug 19, 2014 at 6:51

answered Aug 18, 2014 at 20:24

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3718259 Over a year ago

I have a $.ajaxSetup({async: false}); in another function which executes earlier but I have added another just before the $.get in function validateDelete. The result is still the same. The alert always gets displayed so I don't believe the problem is an asynchronous issue.

user3718259 Over a year ago

Code now working (see edited question). Not sure why?

BalusC Over a year ago

Indeed, you was only returning in the callback function, not in the main function. I'll update the answer.

Collectives™ on Stack Overflow

JSP form still submitting even though JavaScript validation returning false

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related