Javascript Ajax jQuery Html PHP Example Quiz New MORE

How to jQuery Validation with AJAX submit


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script>
 $(document).ready(function () {
        $("#contactform").validate({
        ignore: ":hidden",
        rules: {
             name: {
                 required: true,
                 minlength: 3
             },
             email: {
                 required: true,
                 minlength: 3
             },
             subject: {
                 required: true
             },
             message: {
                 required: true,
                 minlength: 10
             }
         },
         submitHandler: function (form) {
             alert('valid form submission'); /* for demo */
             $.ajax({
                type: "POST",
                url: "submit.php",
                data: $(form).serialize(),
                success: function () {
                     alert("Form submited Successfully !");
                }
             });
             return false; /* required to block normal submit since you used ajax */
         }

     });

 });
</script>
</head>
<body>
<div class="container">
  <h3>jQuery Validation</h3>
  <form id="contactform">
    <div class="form-group">
      Name:
      <input type="text" class="form-control" name="name" />
    </div>
    <div class="form-group">
      Email:
      <input type="text" class="form-control" name="email" />
    </div>
    <div class="form-group">
      Subject:
      <input type="text" class="form-control" name="subject" />
    </div>
    <div class="form-group">
      Message:
      <input type="text" class="form-control" name="message" />
    </div>
    
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>
  
Run it Yourself »