web-dev-qa-db-ja.com

jQuery validateで検証を手動でトリガーする方法は？

jQuery Validate でエラーメッセージを表示するなど、検証を手動でトリガーしたい。

私が達成しようとしているシナリオは、次のような形式です。

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

b1をクリックすると、i1のみが検証されます。 b2をクリックすると、i2のみが検証されます。ただし、すべてのフィールドを投稿する必要があります。これどうやってするの？ b1/b2のクリックイベントを処理し、フォームの一部を手動で検証することを考えました。

javascriptjqueryhtmljquery-validate
132
usr

そのライブラリは、単一の要素の検証を許可するようです。クリックイベントをボタンに関連付けて、次のことを試してください。

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

ここの例：

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

165
Roberto Aloi

または、単に次を使用できます：$('#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
}
102
Anastasiosyal

私のアプローチは以下の通りでした。ここで、特定のチェックボックスが1つクリックまたは変更されたときにフォームを検証したかっただけです。

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

ドキュメント で記述されているように、プログラムでフォーム検証をトリガーする方法は、validator.form（）を呼び出すことです。

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

バージョン1.14の時点で文書化されていないメソッドがあります

validator.checkForm()

このメソッドは、true/falseを返すかどうかを静かに検証します。エラーメッセージは表示されません。

4
user5936891

上からのエヴァMには、上記の回答がほとんどありました（エヴァ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();
2
J-S-B

フォームのパラメーターでvalidate()を使用し、後でフォームの1つのフィールドを手動で検証する場合は、良い方法があります。

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

ドキュメント： Validator.element（）

0
Tobi G.

私はそれを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; }
.....
}
0
bherto39

同様のケースでは、独自の検証ロジックがあり、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'
  });
});
0
user538220