refresh page using ajax with Jquery validator

Question

My page keeps refreshing after it comes back with data. I have used return false in submit handler but it does not working. I have tried to pass e.preventDefault() inside submit handler no effect.

$('#submit').on('click', () => {
	console.log('hello');
	let x = $("#form").validate({
		rules: {
			title: {
				required: true
			},
			fname: {
				required: true
			},
			sname: {
				required: true
			},
			sub: {
				required: true
			},
			msg: {
				required: true
			},
			email: {
				required: true,
				email: true
			}
		},
		submitHandler: function (form) {
			$.ajax({
				url: 'index.php?page=contact',
				type: form.method,
				data: $(form).serialize(),
				success: function (data) {
					console.log(data);
				},
				error: function (data) {
					console.log(data);
				}
			});
			return false; // kill page refresh
		}
	})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" method='post' action="">
   <fieldset>
      <div class="form-row">
         <div class="form-group col-md-2">
            <label for="title">Title:</label>
            <select name="title" class="custom-select" id="title" required>
               <option
                  value="NULL" selected="selected">Please select</option>
               <option value="Mr">Mr</option>
               <option value="Mrs">Mrs</option>
               <option value="Miss">Miss</option>
               <option value="Ms">Ms</option>
            </select>
         </div>
         <div class="form-group col-md-5">
            <label for="fname">First Name:</label>
            <input type="text" class="form-control" placeholder="Your First Name" name="fname" id="fname" required>
         </div>
         <div class="form-group col-md-5">
            <label for="sname">Last Name:</label>
            <input type="text" class="form-control" placeholder="Your Last Name" name="sname" id="sname" required>
         </div>
      </div>
      <div class="form-group">
         <label for="email">E-mail:</label>
         <input type="email" class="form-control" name="email" id="email" placeholder="Your full email address" required>
      </div>
      <div class="form-group">
         <label for="sub">Subject:</label>
         <input type="text" class="form-control" name="sub" id="sub" placeholder="Subject" required>
      </div>
      <div class="form-group">
         <label for="msg">Message:</label>
         <textarea placeholder="Type your message here..." class="form-control" name="msg" id="msg" required></textarea>
      </div>
      <input type="submit" class="btn btn-primary" id="submit" name="submit" value="Submit">
   </fieldset>
</form>

php code

if(isset($_POST['submit'])){

echo 'yes';
die();
}

I have tried to give on different event such $('body').on( ...) or .submit(..) etc did not work basically still refresh the page. If I change the input type=button then it did not refresh the page but then validator did not work and all fields have not been validated.

Thanks

Answer 1

Put preventDefault(); in the top level of the click function rather than in the submitHandler function:

$('#submit').on('click', (e) => {
    e.preventDefault();
    $('#form').submit();
    console.log('Form submitted');
})

$("#form").validate({
    rules: {
        title: {
            required: true
        },
        fname: {
            required: true
        },
        sname: {
            required: true
        },
        sub: {
            required: true
        },
        msg: {
            required: true
        },
        email: {
            required: true,
            email: true
        }
    },
    submitHandler: function(form) {
      console.log('Form is valid');
      $.ajax({
          url: 'index.php?page=contact',
          type: form.method,
          data: $(form).serialize(),
          success: function(data) {
              console.log(data);
          },
          error: function(data) {
              console.log(data);
          }
      });
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<form id="form" method='post' action="">
   <fieldset>
      <div class="form-row">
         <div class="form-group col-md-2">
            <label for="title">Title:</label>
            <select name="title" class="custom-select" id="title" required>
               <option
                  value="NULL" selected="selected">Please select</option>
               <option value="Mr">Mr</option>
               <option value="Mrs">Mrs</option>
               <option value="Miss">Miss</option>
               <option value="Ms">Ms</option>
            </select>
         </div>
         <div class="form-group col-md-5">
            <label for="fname">First Name:</label>
            <input type="text" class="form-control" placeholder="Your First Name" name="fname" id="fname" required>
         </div>
         <div class="form-group col-md-5">
            <label for="sname">Last Name:</label>
            <input type="text" class="form-control" placeholder="Your Last Name" name="sname" id="sname" required>
         </div>
      </div>
      <div class="form-group">
         <label for="email">E-mail:</label>
         <input type="email" class="form-control" name="email" id="email" placeholder="Your full email address" required>
      </div>
      <div class="form-group">
         <label for="sub">Subject:</label>
         <input type="text" class="form-control" name="sub" id="sub" placeholder="Subject" required>
      </div>
      <div class="form-group">
         <label for="msg">Message:</label>
         <textarea placeholder="Type your message here..." class="form-control" name="msg" id="msg" required></textarea>
      </div>
      <input type="submit" class="btn btn-primary" id="submit" name="submit" value="Submit">
   </fieldset>
</form>

Here's another solution that is more in line with what you were trying. The validate function gets called on submit of the form by default, so there's no need to wrap it in a click function:

$("#form").validate({
    rules: {
        title: {
            required: true
        },
        fname: {
            required: true
        },
        sname: {
            required: true
        },
        sub: {
            required: true
        },
        msg: {
            required: true
        },
        email: {
            required: true,
            email: true
        }
    },
    submitHandler: function(form) {
      console.log('Form is valid');
      $.ajax({
          url: 'index.php?page=contact',
          type: form.method,
          data: $(form).serialize(),
          success: function(data) {
              console.log(data);
          },
          error: function(data) {
              console.log(data);
          }
      });
      return false;
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
<form id="form" method='post' action="">
   <fieldset>
      <div class="form-row">
         <div class="form-group col-md-2">
            <label for="title">Title:</label>
            <select name="title" class="custom-select" id="title" required>
               <option
                  value="NULL" selected="selected">Please select</option>
               <option value="Mr">Mr</option>
               <option value="Mrs">Mrs</option>
               <option value="Miss">Miss</option>
               <option value="Ms">Ms</option>
            </select>
         </div>
         <div class="form-group col-md-5">
            <label for="fname">First Name:</label>
            <input type="text" class="form-control" placeholder="Your First Name" name="fname" id="fname" required>
         </div>
         <div class="form-group col-md-5">
            <label for="sname">Last Name:</label>
            <input type="text" class="form-control" placeholder="Your Last Name" name="sname" id="sname" required>
         </div>
      </div>
      <div class="form-group">
         <label for="email">E-mail:</label>
         <input type="email" class="form-control" name="email" id="email" placeholder="Your full email address" required>
      </div>
      <div class="form-group">
         <label for="sub">Subject:</label>
         <input type="text" class="form-control" name="sub" id="sub" placeholder="Subject" required>
      </div>
      <div class="form-group">
         <label for="msg">Message:</label>
         <textarea placeholder="Type your message here..." class="form-control" name="msg" id="msg" required></textarea>
      </div>
      <input type="submit" class="btn btn-primary" id="submit" name="submit" value="Submit">
   </fieldset>
</form>