在 jquery 中验证引导弹出窗口
Posted
技术标签:
【中文标题】在 jquery 中验证引导弹出窗口【英文标题】：Validation in jquery for bootstrap popup 【发布时间】：2016-09-14 08:46:51 【问题描述】：这是我的观点：
@using (html.BeginForm("SaveNewCustomer", "Dealer", FormMethod.Post, new id = "myForm" ))
<div class="form-horizontal">
<div class="row">
<div class="form-group-1">
@Html.LabelFor(model => model.device.MotorType, htmlAttributes: new @class = "control-label col-lg-4" )
@Html.EditorFor(model => model.device.MotorType, new htmlAttributes = new @class = "form-control required", placeholder = "Motor Type", required = "required" )
</div>
<div class="form-group-1">
@Html.LabelFor(model => model.device.PowerRating, htmlAttributes: new @class = "control-label col-lg-4" )
@Html.EditorFor(model => model.device.PowerRating, new htmlAttributes = new @class = "form-control required", placeholder = "Power Rating", required = "required" )
</div>
<div class="form-group-1">
@Html.LabelFor(model => model.device.InstallationDate, htmlAttributes: new @class = "control-label col-lg-4" )
@Html.EditorFor(model => model.device.InstallationDate, new htmlAttributes = new @class = "form-control datepicker required", placeholder = "Installation Date(MM/dd/yyyy)", required = "required" )
</div>
<div class="form-group-1">
@Html.LabelFor(model => model.device.ActivationDate, htmlAttributes: new @class = "control-label col-lg-4" )
@Html.EditorFor(model => model.device.ActivationDate, new htmlAttributes = new @class = "form-control datepicker required", placeholder = "Activation Date(MM/dd/yyyy)", required = "required" )
</div>
<div class="form-group-1">
@Html.LabelFor(model => model.device.DataReceiveInterval, htmlAttributes: new @class = "control-label col-lg-4" )
@Html.EditorFor(model => model.device.DataReceiveInterval, new htmlAttributes = new @class = "form-control required", placeholder = "Data receive Interval", required = "required" )
</div>
<div class="form-group-1">
@Html.LabelFor(model => model.device.HasAMC, htmlAttributes: new @class = "control-label col-lg-4" )
@Html.EditorFor(model => model.device.HasAMC, new htmlAttributes = new @class = "form-control required", @onchange = "OnChange();" )
</div>
<div class="form-group-1" id="HasDate">
@Html.LabelFor(model => model.device.AMCExpiredDate, htmlAttributes: new @class = "control-label col-lg-4" )
@Html.EditorFor(model => model.device.AMCExpiredDate, new htmlAttributes = new @class = "form-control required", placeholder = "AMCExpireDate(MM/dd/yyyy)", required = "required", title = "Enter AMC Expire Date" )
</div>
<button style="margin-left:33%;" id="action" class="btn btn-sm btn-primary col-lg-2 " type="button" name="action" value="SaveDeviceInfo"><strong>Save</strong></button>
</div>
</div>
我的 javascript 脚本是
<script type="text/javascript">
$(document).ready(function ()
jQuery.validator.setDefaults(
debug: true,
success: "valid"
);
$( "#myForm" ).validate(
rules:
"client.ContactNo":
required: true
);
$("#action").click(function ()
if (!$("#myForm").validate()) // Not Valid
return false;
else
Save();
);
function Save()
var frm = $("#myForm").serialize();
$.ajax(
url: "/Dealer/SaveNewCustomer",
data: frm,
type: "POST",
success: function (result)
if (result == "true")
//alert(result);
window.location.href = "/Dealer/Customers?Success=true&Message=Customer updated successfully.";
else
toastr.error(result);
);
</script>
问题是验证没有触发。在 If else 条件下，它显示为 false 并直接将值存储在数据库中。请你帮助我好吗？ 我的代码有什么问题吗？请给我建议。 提前致谢。
【问题讨论】：
【参考方案1】：.validate() 只是 初始化 方法。
.valid() is the method used for testing the form。
if (!$("#myForm").valid()) ....
这是一个有争议的问题，因为无论如何your .ajax() function belongs inside the submitHandler option of the plugin。 submitHandler 回调仅在表单有效时触发，因此您可以完全消除整个 if/then click 处理函数（但是您必须将 button 元素更改为 type="submit"）。
$(document).ready(function ()
jQuery.validator.setDefaults(
debug: true,
success: "valid"
);
$( "#myForm" ).validate(
rules:
"client.ContactNo":
required: true
,
submitHandler: function(form) // only fires when form is valid
var frm = $(form).serialize();
$.ajax(
url: "/Dealer/SaveNewCustomer",
data: frm,
type: "POST",
success: function (result)
if (result == "true")
//alert(result);
window.location.href = "/Dealer/Customers?Success=true&Message=Customer updated successfully.";
else
toastr.error(result);
);
return false;
);
);
注意：如果您碰巧使用了包含在您的 ASP 框架中的 unobtrusive-validation 插件，那么 .validate() 方法将被自动构造和调用。如果是这种情况，那么您对.validate() 的调用将被忽略，并且您只能将任何插件选项放在jQuery.validator.setDefaults() 中。
【讨论】：
我使用了 if (!$("#myForm").valid()) 并且我的问题解决了。谢谢【参考方案2】：您的 html 中缺少表单标签。此外，您没有任何具有 myform 标识的内容。因此，您尝试在 jquery 中验证 #myform 但没有 myform。您需要添加表单标签并为其指定 myform 的 id。
【讨论】：
Sparky 打败了我，但我不认为 $("#myForm").validate() 会返回 true，所以你的 if 语句永远不会运行。您需要按照此处的文档使用提交处理程序：jqueryvalidation.org/validate以上是关于在 jquery 中验证引导弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章