155

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

我试图完成的场景是这样的形式：

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

单击 时b1，仅i1应进行验证。母鸡点击b2，只i2应被验证。但是，必须发布所有字段。我怎样才能做到这一点？我考虑过处理点击事件b1/b2并手动验证表单的一部分。

4

9 回答 9

186

该库似乎允许验证单个元素。只需将单击事件与您的按钮相关联，然后尝试以下操作：

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

这里的例子：

https://jqueryvalidation.org/Validator.element

于 2009-10-08T15:24:56.017 回答
124

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

于 2012-08-30T10:44:19.187 回答
30

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

$('#myForm input:checkbox[name=yourChkBxName]').click(
 function(e){
  $("#myForm").valid();
}
)
于 2012-07-11T04:44:01.210 回答
18

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

var validator = $( "#myform" ).validate();
validator.form();
于 2018-04-27T16:07:00.590 回答
4

从 1.14 版开始有一个未记录的方法

validator.checkForm()

此方法静默验证是否返回真/假。它不会触发错误消息。

于 2016-02-16T19:24:06.587 回答
3

上面的 Eva M，几乎得到了上面发布的答案（感谢 Eva M！）：

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

这几乎是答案，但它会导致问题，即使是截至 2018 年 12 月 13 日的最新 jquery 验证插件。问题是，如果直接复制该样本，并且 EVER 不止一次调用“.validate()” ，验证的焦点/关键处理可能会被破坏，并且验证可能无法正确显示错误。

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

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

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

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

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

3）使用变量/全局和调用形式。

var bIsValid = oValidator.form();
于 2018-12-14T17:15:58.150 回答
1

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

于 2017-05-02T14:10:20.400 回答
0

我试过它有效 tnx @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; }
.....
}
于 2012-10-30T07:26:31.803 回答
0

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

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

文档：Validator.element()

于 2017-03-17T13:27:34.947 回答