jQueryで検証を手動で起動するにはどうすればよいですか？

Question

jQuery Validateというエラーメッセージを表示するなどの検証を手動で開始したいと考えています。

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

b1をクリックするだけi1を検証する必要があります。

私が達成しようとしているシナリオでは、このような形です。鶏b2をクリックすると、i2のみ検証されます。ただし、すべてのフィールドを転記する必要があります。これどうやってするの？ b1/b2のclickイベントを処理し、手動でフォームの一部を検証することを考えました。

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

または1つは、単純に使用することができます：今、私はただ一つの特定のチェックボックスがクリックされたとき、私のフォームが検証されたかった/変更$('#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

が、私はそれが@Anastasiosyal私は共有したいTNX働いてみましたそれはこのスレッド上にあります。

フィールドを空にしたときに入力フィールドがどのようにトリガーしなかったかは肯定的ではありません。しかし、私は使用して個別に必要なフィールドをトリガするために管理：ここでの私の見解は

@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

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

バージョン1.14

のよう文書化されていない方法があります

validator.checkForm() 

このメソッドは、trueまたはfalseを返すかどうかを黙って検証します。エラーメッセージは表示されません。フォーム上のパラメータでvalidate()を使用して、手動でその後、フォームのいずれかのフィールドを検証したい場合は

Answer 6

は良い方法があります：

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

ドキュメンテーション：私の似たようなケースでValidator.element()

Answer 7

、I私自身の検証ロジックを持ち、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' 
 
    }); 
 
});