javascript - 收到验证错误，但表单正在使用 ajax 和 PHP 提交

Question

我有一个表单，字段是姓名、电子邮件、消息。我正在 ajax 的帮助下将数据插入数据库，并使用 Jquery 验证器进行验证。当我单击提交按钮而不填写字段时，我收到验证错误，但表单也在提交。首先，检查字段中的数据是否正确。如果数据正确，则表单将提交，否则将显示验证错误。你能帮我吗？

HTML

    <form name="contact_form" id="form_sub" method="post">
      <input type="text" name="name" id="name"><br>
      <input type="email" name="email" id="email"><br>
      <textarea name="message" id="message"></textarea><br />
      <input name="submit" type="submit" value="submit">
      <span class="success">Message was Sent</span>
    </form>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="js/jquery.validate.min.js"></script>

<script type="text/javascript">

// When the browser is ready...
  $(function() {

    // Setup form validation on the #register-form element
    $("form[name='contact_form']").validate({

        // Specify the validation rules
        rules: {
           name:{ required: true,
                 minlength:3,
                 maxlength:30
                },

            email: {
                required: true,
                email: true
            },

            message:{
          required: true,
          minlength:10,
          maxlength:500
          }
         },

        // Specify the validation error messages
        messages: {
            name: 
            {
                required:"Please enter your name",
                minlength:"Please enter min 3 character"
                },

            email: "Please enter a valid email address",
            message: {
                required:"Please enter your message",
                minlength:"Please enter min 10 character",
                maxlength:"Not more then 500 character"
            }

        },

        submitHandler: function(form) {
            form.submit();
        }
    });

  });


      $(function () {
        $('#form_sub').submit('click', function (event) {
          event.preventDefault();// using this page stop being refreshing 

          $.ajax({
            type: 'POST',
            url: 'demo2.php',
            data: $('#form_sub').serialize(),
            success: function () {
        $('.success').fadeIn(200).show();

            }
          });

        });
      });
    </script>

PHP

$name=$_POST['name'];
$email=$_POST['email'];
$user_message=$_POST['message'];

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demo";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "INSERT INTO contactus(name, email, message) VALUES ('$name', '$email', '$user_message')";

if ($conn->query($sql) === TRUE) {

} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();

Answer 1

您需要将提交函数内容移至提交处理程序中:

submitHandler: function ( form ) {
        $.ajax( {
          type: 'POST',
          url: 'demo2.php',
          data: $( '#form_sub' ).serialize(),
          success: function () {
            $( '.success' ).fadeIn( 200 ).show();
          }
        });
      }