如何使用 jQuery 验证手动触发验证？

我想手动触发验证，包括用 JQuery 验证显示错误消息。

我试图实现的场景是这样一种形式:

<form>
<input id=i1> <button id=b1>
<input id=i2> <button id=b2>
</form>

当单击 b1时，应该只验证 i1。当单击 b2时，应该只验证 i2。但是，必须张贴所有字段。我怎么能这么做？我考虑过处理 b1/b2的 click 事件并手动验证表单的一部分。

246263 次浏览
小开
最佳答案

该库似乎允许对单个元素进行验证。只需将一个单击事件关联到您的按钮，然后尝试以下操作:

$("#myform").validate().element("#i1");

例如:

Https://jqueryvalidation.org/validator.element

小开

我的方法如下所示，现在我只需要在单击/更改某个特定复选框时验证表单:

$('#myForm input:checkbox[name=yourChkBxName]').click(
function(e){
$("#myForm").valid();
}
)
小开

或者可以简单地使用: $('#myElem').valid()

if ($('#myElem').valid()){
// will also trigger unobtrusive validation only for this element if in place
// add your extra logic here to execute only when element is valid
}

请注意，在使用此方法检查表单之前，需要对表单调用 validate()。

文件链接: Https://jqueryvalidation.org/valid/

小开

我试过了，我想在这个帖子上分享一下。

我不确定当我清空字段时，输入字段是如何没有触发的。但是我设法单独触发每个必需的字段，使用:

$(".setting-p input").bind("change", function () {
//Seven.NetOps.validateSettings(Seven.NetOps.saveSettings);
/*$.validator.unobtrusive.parse($('#saveForm'));*/
$('#NodeZoomLevel').valid();
$('#ZoomLevel').valid();
$('#CenterLatitude').valid();
$('#CenterLongitude').valid();
$('#NodeIconSize').valid();
$('#SaveDashboard').valid();
$('#AutoRefresh').valid();
});

这是我的观点

@using (Html.BeginForm("SaveSettings", "Settings", FormMethod.Post, new {id = "saveForm"}))
{
<div id="sevenRightBody">
<div id="mapMenuitemPanel" class="setingsPanelStyle" style="display: block;">
<div class="defaultpanelTitleStyle">Map Settings</div>
Customize the map view upon initial navigation to the map view page.
<p class="setting-p">@Html.LabelFor(x => x.NodeZoomLevel)</p>
<p class="setting-p">@Html.EditorFor(x => x.NodeZoomLevel) @Html.ValidationMessageFor(x => x.NodeZoomLevel)</p>
<p class="setting-p">@Html.LabelFor(x => x.ZoomLevel)</p>
<p class="setting-p">@Html.EditorFor(x => x.ZoomLevel) @Html.ValidationMessageFor(x => x.ZoomLevel)</p>
<p class="setting-p">@Html.LabelFor(x => x.CenterLatitude)</p>
<p class="setting-p">@Html.EditorFor(x => x.CenterLatitude) @Html.ValidationMessageFor(x => x.CenterLatitude)</p>
<p class="setting-p">@Html.LabelFor(x => x.CenterLongitude)</p>
<p class="setting-p">@Html.EditorFor(x => x.CenterLongitude) @Html.ValidationMessageFor(x => x.CenterLongitude)</p>
<p class="setting-p">@Html.LabelFor(x => x.NodeIconSize)</p>
<p class="setting-p">@Html.SliderSelectFor(x => x.NodeIconSize) @Html.ValidationMessageFor(x => x.NodeIconSize)</p>
</div>

和我的实体

   public class UserSetting : IEquatable<UserSetting>
{
[Required(ErrorMessage = "Missing Node Zoom Level.")]
[Range(200, 10000000, ErrorMessage = "Node Zoom Level must be between {1} and {2}.")]
[DefaultValue(100000)]
[Display(Name = "Node Zoom Level")]
public double NodeZoomLevel { get; set; }


[Required(ErrorMessage = "Missing Zoom Level.")]
[Range(200, 10000000, ErrorMessage = "Zoom Level must be between {1} and {2}.")]
[DefaultValue(1000000)]
[Display(Name = "Zoom Level")]
public double ZoomLevel { get; set; }


[Range(-90, 90, ErrorMessage = "Latitude degrees must be between {1} and {2}.")]
[Required(ErrorMessage = "Missing Latitude.")]
[DefaultValue(-200)]
[Display(Name = "Latitude")]
public double CenterLatitude { get; set; }


[Range(-180, 180, ErrorMessage = "Longitude degrees must be between {1} and {2}.")]
[Required(ErrorMessage = "Missing Longitude.")]
[DefaultValue(-200)]
[Display(Name = "Longitude")]
public double CenterLongitude { get; set; }


[Display(Name = "Save Dashboard")]
public bool SaveDashboard { get; set; }
.....
}
小开

在1.14版中有一个未记录的方法

validator.checkForm()

此方法静默地验证返回 true/false。它不触发错误消息。

小开

如果在表单上使用带参数的 validate()，并且希望在之后手动验证表单的一个字段，那么有一个很好的方法:

var validationManager = $('.myForm').validate(myParameters);
...
validationManager.element($(this));

文件: Element ()

小开

在我的类似案例中，我有自己的验证逻辑，只是想使用 jQuery 验证来显示消息。这就是我所做的。

//1) Enable jQuery validation
var validator = $('#myForm').validate();


$('#myButton').click(function(){
//my own validation logic here
//.....
//2) when validation failed, show the error message manually
validator.showErrors({
'myField': 'my custom error message'
});
});

小开

正如在 文件中所写的，以编程方式触发表单验证的方法是调用 validator.form ()

var validator = $( "#myform" ).validate();
validator.form();
小开

伊娃 M 从上面，几乎得到了上面贴出的答案(谢谢伊娃 M!) :

var validator = $( "#myform" ).validate();
validator.form();

这几乎就是答案，但是在2018年12月13日最新的 jquery 验证插件中也会出现问题。问题是，如果直接拷贝这个样本，并且永远不调用”。不止一次，验证的焦点/关键字处理可能会中断，并且验证可能不会正确地显示错误。

下面是如何使用 Eva M 的答案，并确保不会出现焦点/密钥/错误隐藏问题:

1)将验证程序保存到变量/全局。

var oValidator = $("#myform").validate();

2)不要再调用 $(“ # myform”)。

如果多次调用 $(“ # myform”) . valid() ，可能会导致焦点/密钥/错误隐藏问题。

3)使用变量/global 和调用表单。

var bIsValid = oValidator.form();

提交答案