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

Question

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

我试图完成的情况是这样的形式：

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

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

Answer 1

该库似乎允许验证单个元素。

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

例子在这里：只需点击事件的按钮关联，请尝试以下

http://docs.jquery.com/Plugins/Validation/Validator/element#element

Answer 2

我的方法是如下。现在，我只是想，当用户点击一个特定的复选框来验证我的表单/改变：

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

Answer 3

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

Answer 4

我想它的工作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; } 
..... 
} 

Answer 5

有作为的版本无证方法1.14

validator.checkForm() 

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

Answer 6

有一个很好的方式，如果你在窗体上使用validate()与参数，并要验证表单的一个领域手动算账：

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

文档：Validator.element()

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' 
 
    }); 
 
});