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

Question

我想使用 jQuery Validate 手动触发验证并显示错误信息。

我想实现的场景是这样一个表单：

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

当点击b1时，只需要验证i1。当点击b2时，只需要验证i2。但是所有字段都必须提交。我该怎么做？我考虑处理b1/b2的点击事件，并手动验证表单的一部分。

- usr

---

为什么不手动验证呢？这个插件非常适用于验证整个表单，但在这种情况下，手动验证表单更合适。 - Anatoliy

表单比我的示例要大。我想要自动化。 - usr

Answer 1

这个库似乎只允许针对单个元素进行验证。只需将点击事件与您的按钮关联，并尝试以下操作：

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

这里有示例：

https://jqueryvalidation.org/Validator.element

- Roberto Aloi

---

这验证了整个表单... 如果只想验证一个字段，正确的方式是这样的：https://dev59.com/83M_5IYBdhLWcg3wNgKZ#12195091 - Leniel Maccaferri

无论出于何种原因，当我以这种方式进行验证时，我无法获得自定义错误文本。可能与我在Durandal对话框内运行有关。在该上下文中，我遇到了很多问题。 - P.Brian.Mackey

@Roberto Aloi：链接已过时。 - Sebastian

@LenielMaccaferri，你的方法也验证了整个表单 - jQuery Validate 也需要这样做。 - Oliver Schimmer

@OliverSchimmer 这里和那里的两个答案都已经更新了... 所以我当时的评论已经失去了与当前答案的联系。 :) - Leniel Maccaferri

Answer 2

或者简单地使用：$('#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/

- Anastasiosyal

---

在使用这种方法检查表单之前，需要在表单上调用validate()。 - GETah

Answer 3

我的做法如下。现在，我只想在点击/更改一个特定的复选框时验证我的表格：

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

- Yoosaf Abdulla

---

我的查询是：if ($('#someID)==='2017-4-12') { $("#myform").validate().element("#i1").valid(); } else { $("#myform").validate().element("#i1").invalid(); } 这段代码正确吗？ - srinivas gowda

Answer 4

如文档所述，以编程方式触发表单验证的方法是调用 validator.form()。

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

- Eva M

---

这并没有回答问题，因为问题是关于仅验证一个特定字段的。不过这正是我在寻找的。谢谢！ - jlh

Answer 5

截至1.14版本，存在一种未经记录的方法。

validator.checkForm()

这种方法会在后台默默地验证并返回true/false，它不会触发错误信息。

- user5936891

---

未记录文档化 = 可能随时会出现问题。 - usr

Answer 6

上面的Eva M已经接近答案了（谢谢你，Eva M！）：

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

这几乎就是答案，但即使是截至2018年12月13日最新的jquery验证插件也会出现问题。问题在于，如果一个人直接复制该示例，并且多次调用“.validate()”，则验证的焦点/键处理可能会出现故障，并且验证可能无法正确显示错误。

以下是如何使用Eva M的答案，并确保不发生焦点/键/隐藏错误的问题：

1) 将您的验证器保存到变量/全局变量中。

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

2) 永远不要再次调用$("#myform").validate()。

如果您多次调用$("#myform").validate()，可能会导致焦点/键/错误隐藏问题。

3) 使用变量/全局并调用表单。

var bIsValid = oValidator.form();

- J-S-B

Answer 7

在我类似的情况下，我有自己的验证逻辑，只想使用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'
  });
});

- LeoX

Answer 8

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

我不确定为什么当我清空字段时输入字段没有触发。但是我成功地使用以下方法逐个触发每个必填字段：

$(".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; }
.....
}

- bherto39

---

这个回答假定问题明确涉及 jQuery 验证时处于 .Net 环境中。 - Kenogu Labz

Answer 9

如果您在表单上使用带参数的validate()并且想要手动验证表单中的一个字段，则有一种好方法：

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

文档：Validator.element()

- Tobi G.