如何正确验证模式表单
How to correctly validate a modal form
我似乎无法在我的引导模式上获得验证,我一直在努力解决我遇到的几个例子。
验证引导模式的正确方法是什么?
我的网页:
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form class="form-control" role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control required error" id="pName" name="pName" placeholder="Enter a p name" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" placeholder="Enter and action">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我的Javascript:
$(function () {
$("#newModalForm").validate({
rules: {
pName: {
required: true,
minlength: 8
},
action: "required"
},
messages: {
pName: {
required: "Please enter some data",
minlength: "Your data must be at least 8 characters"
},
action: "Please provide some data"
}
});
});
根据我的代码,当我单击模态上的保存按钮时,似乎没有任何反应。 我正在使用jquery.validate.js脚本。
有人可以指出我正确的方向吗?
您有两个问题:
-
您的按钮需要设置为
type="submit"
而不是type="button"
-
提交按钮应位于
form
标签内。
请参阅工作示例代码段。
$(function() {
$("#newModalForm").validate({
rules: {
pName: {
required: true,
minlength: 8
},
action: "required"
},
messages: {
pName: {
required: "Please enter some data",
minlength: "Your data must be at least 8 characters"
},
action: "Please provide some data"
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" require/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action" require>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
如果您需要从引导模式通过 AJAX 发送数据,请使用以下代码:
$("#addMyModal form").validate({
rules: {
Name: {
required: true,
minlength: 2
},
Email: {
required: true,
minlength: 5
},
Phone: {
required: true,
minlength: 12
}
},
messages: {
Name: {
required: "Обязательное поле",
minlength: "Минимальная длинна Имени 2 символа"
},
Email: {
required: "Обязательное поле",
minlength: "Минимальная длинна Email 5 символов",
email: "Пожалуйста введите корректный email адрес."
},
Phone: {
required: "Обязательное поле",
minlength: "Минимальная длинна Телефона 11 символов"
}
},
submitHandler: function(form) {
$.ajax({
url: './pay-vip.php',
type: 'POST',
data: $(form).serialize(),
success: function(response) {
location.replace(location + "pay-vip.php");
alert("Send mail")
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" require/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action" require>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
我遇到了一些类似的问题。但事实证明,
$("#newModalForm").validate({ ... });
必须放在外面
$(function () { });
这解决了我的问题
相关文章:
- jQuery日期选择器在Codeigniter和Bootsrap模式表单中不起作用
- 谷歌浏览器模式正则表达式在使用setCustomValidity动态创建表单时不起作用
- 我无法从引导模式中清除表单数据
- 提交表单后,模式窗口未关闭
- 我试图使用引导模式类来制作一个弹出注册表单,但弹出没有'不起作用
- 从JSON模式创建表单,如何添加关闭按钮
- 如何在模式窗口中从html表单文件类型打开图像
- 如何从json模式创建表单
- 确认脏表单上的角度模式关闭
- 如何防止引导模式关闭表单提交使用代码点火器
- jquery ui模式框中的表单隐藏后,键盘将不再被调用
- 以引导模式显示表单结果
- 由多个按钮提交的一个模式引导表单
- 使用 jQuery UI 模式表单永久更改 HTML 文本
- 将显示与位置绝对输出移动的表单放入移动模式引导按钮中
- 在单击回车键并从引导模式窗口中点击提交按钮时提交表单数据
- 引导模式中的表单验证
- 更新现有数据时检索引导模式表单中的复选框字段的值时出现问题
- 引导表单模式,post值到PHP文件
- 在流星中实现自动表单模式