jquery - jQuery Validation プラグイン: 指定された送信ボタンの検証を無効にする

Question

Jörn Zaeffere の優れた jQuery Validation プラグインを使用して検証している複数のフィールド (カスタム検証用に追加されたメソッドを含むもの) を持つフォームがあります。指定された送信コントロールで検証を回避するにはどうすればよいですか (つまり、一部の送信入力で検証を起動し、他の入力で検証を起動しません)。これは、標準の ASP.NET バリデータコントロールを使用した ValidationGroups に似ています。

私の状況：

ASP.NET WebForms を使用していますが、必要に応じて無視できます。ただし、私はバリデーションを「推奨」として使用しています。つまり、フォームが送信されると、バリデーションが起動しますが、「必須」メッセージが表示される代わりに、「推奨」が表示され、「あなたは次のフィールドがありませんでした....続行しますか?」エラーコンテナのその時点で、検証を無視してとにかく送信する、押すことができる別の送信ボタンが表示されるようになりました。このボタンコントロールのフォーム .validate() を回避して投稿するにはどうすればよいですか?

http://jquery.bassistance.de/validate/demo/multipart/にある家の売買サンプルでは、前のリンクにアクセスするためにこれを許可していますが、カスタムメソッドを作成してバリデータに追加することでこれを実現しています。検証プラグインに既にある機能を複製するカスタムメソッドを作成する必要はありません。

以下は、私が今入手したすぐに適用可能なスクリプトの短縮版です。

var container = $("#<%= Form.ClientID %> div.validationSuggestion");

$('#<%= Form.ClientID %>').validate({          
    errorContainer: container,
    errorLabelContainer: $("ul",container),
    rules: {
        <%= YesNo.UniqueID %>: { required: true },
        <%= ShortText.UniqueID %>: { required: true } // etc.

    },
    messages: {
        <%= YesNo.UniqueID %>: 'A message.',
        <%= ShortText.UniqueID %>: 'Another message.' // etc.
    },
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass("valid");
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass("valid");
    },
    wrapper: 'li'
});

score 293 · Accepted Answer

送信ボタンにCSS クラスを追加してcancel、検証を抑制することができます

例えば

<input class="cancel" type="submit" value="Save" />

この機能に関する jQuery Validator のドキュメントを参照してください:送信時に検証をスキップする

編集：

上記の手法は廃止され、formnovalidate属性に置き換えられました。

<input formnovalidate="formnovalidate" type="submit" value="Save" />

score 109 · Accepted Answer

それを行う他の（文書化されていない）方法は、次のように呼び出すことです：

$("form").validate().cancelSubmit = true;

ボタンのクリックイベント (たとえば)。

score 21 · Accepted Answer

さらに別の（動的な）方法：

$("form").validate().settings.ignore = "*";

再度有効にするには、デフォルト値に戻します。

$("form").validate().settings.ignore = ":hidden";

ソース: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

score 10 · Accepted Answer

フォームの送信時に検証されない検証を配線する場合は、 onsubmit：falseオプション（ドキュメントを参照）を使用できます。次に、asp：buttonにOnClientClick = $（'＃aspnetForm'）。valid（）;を追加します。フォームが有効かどうかを明示的に確認します。

上記のオプトアウトの代わりに、これをオプトインモデルと呼ぶことができます。

また、ASP.NETWebFormsでjquery検証を使用していることに注意してください。ナビゲートするいくつかの問題がありますが、一度それらを通過すると、ユーザーエクスペリエンスは非常に優れています。

score 3 · Accepted Answer

( の拡張子と+@lepeの@redsquare答え)ASP.NET MVCjquery.validate.unobtrusive.js

jquery検証プラグイン（Microsoftの目立たないものではない）を使用すると.cancel、送信ボタンにクラスを配置して、検証を完全にバイパスできます（受け入れられた回答に示されているように）。

 To skip validation while still using a submit-button, add a class="cancel" to that input.

  <input type="submit" name="submit" value="Submit"/>
  <input type="submit" class="cancel" name="cancel" value="Cancel"/>

type='reset'（これをまったく別のものと混同しないでください）

残念ながら、jquery.validation.unobtrusive.js検証処理 (ASP.NET MVC) コードは、jquery.validate プラグインのデフォルトの動作を台無しにします。

.cancelこれは、上記のように送信ボタンを配置できるようにするために私が思いついたものです。マイクロソフトがこれを「修正」した場合は、このコードを削除できます。

    // restore behavior of .cancel from jquery validate to allow submit button 
    // to automatically bypass all jquery validation
    $(document).on('click', 'input[type=image].cancel,input[type=submit].cancel', function (evt)
    {
        // find parent form, cancel validation and submit it
        // cancelSubmit just prevents jQuery validation from kicking in
        $(this).closest('form').data("validator").cancelSubmit = true;
        $(this).closest('form').submit();
        return false;
    });

注: 最初にこれが機能していないように見える場合は、サーバーにラウンドトリップしていないことを確認し、サーバーによって生成されたページにエラーが表示されていないことを確認してください。他の方法でサーバー側の検証をバイパスする必要があります。これにより、フォームをエラーなしでクライアント側に送信できます (代わり.ignoreに、フォーム内のすべてに属性を追加することもできます)。

(注:buttonボタンを使用して送信している場合は、セレクターに追加する必要がある場合があります)

score 1 · Accepted Answer

$('#formId')[0].submit()この質問は古いものですが、jQuery オブジェクトの代わりに dom 要素を取得することで、検証フックをバイパスする別の方法を見つけました。このボタンは、入力を含む親フォームを送信します。

<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>

inputまた、「送信」という名前のがないことを確認してください。または、という名前の関数をオーバーライドしますsubmit。

score 1 · Accepted Answer

1

<button type="submit" formnovalidate="formnovalidate">submit</button>

も働いている

于 2020-07-21T08:58:50.017 に答える

jquery - jQuery Validation プラグイン: 指定された送信ボタンの検証を無効にする

12 に答える 12

Related

Reference