使用带有 Jquery 验证器的 ajax 刷新页面

Question

我的页面在返回数据后不断刷新。我在提交处理程序中使用了 return false 但它不起作用。我试图在提交处理程序中传递 e.preventDefault() 无效。

$('#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 代码

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

echo 'yes';
die();
}

我试图给出不同的事件，例如 $('body').on( ...) 或 .submit(..) 等 不工作 基本上还是刷新页面。 如果我更改输入 type=button 那么它不会刷新页面但验证器不起作用并且所有字段都没有被验证。

谢谢

Answer 1

将preventDefault();放在点击函数的顶层而不是submitHandler函数中：

$('#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>

这是另一个更符合您尝试的解决方案。默认情况下，validate 函数在提交表单时被调用，因此无需将其包装在 click 函数中：

$("#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>