form is submitted even if validation failed

Question

I try to check if an email exists before allowing to submit the form.

if the email exists, I get the alert which I added to test the form, but it still submits the form and moves to "login.asp". I also added "event.preventDefault();" to try and stop it, but still it happens Here is my code:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() { //newly added 
            $('#Submit').click(function() {
                alert('in');
                var emailVal = $('#email').val(); // assuming this is a input text field
                $.post('User_RegisterCheck.asp', {
                    'email': emailVal
                }, function(data) {
                    if (data == 'exist') {
                        alert('exits');
                        return false;
                        event.preventDefault();
                    } else $('#FormRegID').submit();
                });
            });
        });
    </script>
</head>

<body>
    <form method="post" id="FormRegID" name="FormRegID" action="login.asp">

        <div class="form-group ">
            <label for="email" class="control-label">email</label>
            <input type="email" class="form-control w-75" id="email" name="email" placeholder="email" required>

        </div>
        <input type="image" name="Submit" src="/images/button_login-register.png" border="0" alt="Submit" id="Submit" style="width: 209px;" />
        </div>

    </form>
</body>

</html>

How can I validate the email?

Part of the answer: https://stackoverflow.com/a/8664680/5267751 (use onsubmit instead of click) — user202729, Dec 03 '19 at 11:01
Possible duplicate of [Prevent form submission based on the response received from ajax call](https://stackoverflow.com/questions/50907567/prevent-form-submission-based-on-the-response-received-from-ajax-call) — user202729, Dec 03 '19 at 11:02
@user202729 the title is certainly a dupe, but it provides no workable answer and isn't a useful solution. — Rory McCrossan, Dec 03 '19 at 11:05
@RoryMcCrossan The answer works (it contains the same content as your answer), just not a copy-pastable code. The asker would need to understand the content and do some (more) research to write the code... — user202729, Dec 03 '19 at 11:26
Exactly my point :) Also note that the approach in the first dupe wouldn't work because the call here is async. — Rory McCrossan, Dec 03 '19 at 11:29

Rory McCrossan · Answer 1 · 2019-12-03T14:28:45.460

1

The issue is because you stop the submission too late; you're doing it in the AJAX request which is asynchronous. The form has already been sent by the time that occurs.

To fix this call preventDefault() on the event, regardless of the state of the AJAX request. Then you can make the request and if the validation passes you can submit the form element (note: not the jQuery object containing the form) and allow the data to be sent to the server. Try this:

<form method="post" id="FormRegID" name="FormRegID" action="login.asp">
  <div class="form-group ">
    <label for="email" class="control-label">email</label>
    <input type="email" class="form-control w-75" id="email" name="email" placeholder="email" required>
  </div>
  <input type="image" name="Submit" src="/images/button_login-register.png" border="0" alt="Submit" id="Submit" style="width: 209px;" />
  </div>
</form>

jQuery(function($) {
  $('#FormRegID').on('submit', function(e) {
    e.preventDefault();
    var emailVal = $('#email').val();

    $.post('User_RegisterCheck.asp', {
      'email': emailVal
    }, function(data) {
      if (data.trim() !== 'exist') 
        this.submit();
    });
  });
});

Note that this hooks to the submit event of the form, not the click of the button.

I would also suggest you return a boolean value in a formal data structure from your AJAX call, such as JSON, instead of plaintext. This is because whitespace can cause problems with the latter being interpreted correctly.

edited Dec 03 '19 at 14:28

answered Dec 03 '19 at 11:05

Rory McCrossan

331,213
40
305
339

Now it's submitting the form regardless of the validation. I tried to debug it, and it's not even committing the AJAX call, but immediately sent the form – havlaz Dec 03 '19 at 14:26
Check the console for errors in the AJAX request. Also check the exact response of the request - it's possible the plain text response is causing issues. – Rory McCrossan Dec 03 '19 at 14:28
The ajax worked before, and I don't get any error on the console https://www.yomyom.net/test.asp – havlaz Dec 03 '19 at 15:07
Which browser are you testing with? Your link works fine for me in Chrome 78 on Windows - ie. I see validation errors when submitting an empty field, and when submitting an invalid email address, and the form submits correctly when a valid email is entered. – Rory McCrossan Dec 03 '19 at 15:45
Well that's down to your AJAX method. Check the response that's coming back is `exist`. – Rory McCrossan Dec 04 '19 at 08:52
you need to try to select an email that already exits - test@test.com. as you can see, the ajax return exits: https://www.yomyom.net/User_RegisterCheck.asp?email=test@test.com I also added alerts whether it exists or not (I was unable to add the code in this comment but you can see the source page) - but as I said, it seems the page doesn't even commit this condition – havlaz Dec 04 '19 at 09:15
That's because you've hooked to the `Submit` event, not `submit`. Remember that JS is case-sentitive. – Rory McCrossan Dec 04 '19 at 09:22

form is submitted even if validation failed

1 Answers1