jQuery .submit() with validation and without page refresh

问题

I have a problem that others seem to have, but I cannot get the recommended solution (i.e., "return false;") to work. Any help would be great!

Description:

When the form is submitted, I want to validate the input is in the correct format (i.e., type="email") and launch an alert (i.e., "Form submitted.") without the page refreshing. Currently, the alert does not appear and the page refreshes.

Test Code:

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- JavaScript -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <!-- Form -->
        <form>
            <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
            <button type="submit" id="submit">Submit</button>
        </form>

        <!-- Alert on Submission -->
        <script>
            console.log("Ready to Go!");
            $('#submit').submit(function () {
                alert("Form submitted.");
                return false;
            });
        </script>
    </body>
</html>

回答1:

You will want to catch the submit event of the form. There is no submit event on a button.

        $('form').submit(function () {
            if (*everything ok*) {
                alert("Form submitted.");
            } else {
                return false;
            }
        });

Ideally you would help identify your <form>, either with an ID or a class, i.e.:

<form id="xyz-form">

And then change your selector to:

$('#xyz-form').submit(...);

Now this is only to stop the form from submitting when there are errors. When return false; isn't the path the submit callback takes, your page is going to refresh. If you want to submit the data to the server without a refresh, you will need to approach this differently.

回答2:

Give your form an ID, and change your jquery to use #formid instead.

For example :

<form id="form">
    <input type="email" placeholder="Email" value="" size="25px" required="required" id="userEmail">
    <button type="submit" id="submit">Submit</button>
</form>

<script type="text/javascript">
    $('#form').submit(function () {
        alert("Form submitted.");
        return false;
    });
</script>

回答3:

The event handler attached to the submit function in jQuery can be the form element or a div element. Read more on jQuery API You can implement a click event when the user clicks on the submit button without its default submitting behavior with jQuery's preventDefault function

console.log("Ready to Go!");
            $('form').submit(function () {
                alert("Form submitted.");
                return false;
            });
$("#submit").click(function(e){
      if (hasError){
          e.preventDefault();
      }
      else{
         alert("success");
      }
 })

The if and else statements are created for simple validation. For the scope of your question, I leave most of the coding for your creativity. But you can basically create a simple function to check for errors with the user inputs, if there are errors,prevent the submit button's default submission behavior. If the inputs are not empty and if inputs are free of errors, alert the user that the form has been submitted.

回答4:

try this instead

    $('#submit').click(function () {
        alert("Form submitted.");
        return false;
    });

it'll accomplish what you want.

basically the click fires before the submit

try this snippet to clear things up

 console.log("Ready to Go!");

$('#submit').click(function () {
  alert("Form submitted.");
  //return false;
  return true;
});

$("form").submit(function( event ) {
  alert("woot woot");
});

来源：https://stackoverflow.com/questions/26245220/jquery-submit-with-validation-and-without-page-refresh

标签

javascript

jquery

html

validation

form-submit