jquery - 使用带有 Jquery 验证器的 ajax 刷新页面
问题描述
我的页面在返回数据后不断刷新。我在提交处理程序中使用了 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(..) 等基本上没有工作仍然刷新页面。如果我更改输入类型 = 按钮,那么它不会刷新页面,但验证器不起作用并且所有字段都没有经过验证。
谢谢
解决方案
放在preventDefault();
click 函数的顶层而不是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>
推荐阅读
- reactjs - 如何在 redux 工具包中转换具有多个调度的动作创建者?
- c# - Visual Studio IDE0032 建议有时会是错误的应用吗?
- python - 有没有办法用 Python 从目录创建 jar?
- javascript - NodeJS - 从输入流中读取两个数字并将其总和打印到输出流
- mysql - MySQL:如何根据先前的值有效地批量插入行?
- typescript - 开玩笑:找不到模块“monaco-editor-core”
- c# - ASP.NET Core API 使用 JWT 不记名令牌进行身份验证
- python - 使用 python 将抓取的数据直接保存到 azure blob 存储
- razor - Syncfusion DateRangePicker 更改后回发值
- javascript - 隐藏 API 信息