jquery弹窗提交表单
时间: 2023-11-25 16:51:21 浏览: 50
以下是使用jQuery validate+artdialog+jquery form实现弹出表单的步骤:
1. 引入jQuery库、jQuery validate插件、artdialog插件和jquery form插件。
2. 在HTML中添加一个form表单,并在表单中添加需要验证的表单元素。
3. 使用jQuery validate插件对表单进行验证,并在验证通过后使用artdialog插件弹出表单。
4. 在artdialog中添加表单元素,并使用jquery form插件实现ajax无刷新提交表单。
下面是一个示例代码:
```html
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入jQuery validate插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<!-- 引入artdialog插件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/art-dialog/7.0.3/dialog-min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/art-dialog/7.0.3/dialog-min.js"></script>
<!-- 引入jquery form插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<!-- 在HTML中添加一个form表单 -->
<form id="myForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required><br>
<label for="message">留言:</label>
<textarea id="message" name="message" required></textarea><br>
<button type="submit">提交</button>
</form>
<script>
// 使用jQuery validate插件对表单进行验证
$('#myForm').validate({
rules: {
name: 'required',
email: {
required: true,
email: true
},
message: 'required'
},
messages: {
name: '请输入姓名',
email: {
required: '请输入邮箱',
email: '请输入正确的邮箱格式'
},
message: '请输入留言'
},
submitHandler: function(form) {
// 在验证通过后使用artdialog插件弹出表单
var dialog = dialog({
title: '提交表单',
content: $('#myForm'),
okValue: '提交',
ok: function() {
// 使用jquery form插件实现ajax无刷新提交表单
$('#myForm').ajaxSubmit({
url: 'submit.php',
type: 'post',
success: function(responseText, statusText, xhr, $form) {
alert('提交成功');
dialog.close();
},
error: function() {
alert('提交失败');
}
});
return false;
},
cancelValue: '取消',
cancel: function() {}
});
dialog.showModal();
}
});
</script>
```