web-dev-qa-db-ja.com

jQuery Validationプラグイン：指定された送信ボタンの検証を無効にします

JörnZaeffereの優れたjQuery Validationプラグインで検証している（カスタム検証用に追加されたメソッドを含む）複数のフィールドを持つフォームがあります。指定された送信コントロールを使用して検証を回避する方法（言い換えると、一部の送信入力で検証を起動し、他の入力では検証を起動しない）。これは、標準のASP.NET検証コントロールを備えたValidationGroupsに似ています。

私の状況：

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

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

以下は、私が今持っているすぐに適用可能なスクリプトの短縮版です。

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'
});
jqueryjquery-validate
160
Ted

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

例えば

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

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

編集：

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

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

他の（文書化されていない）方法は、以下を呼び出すことです：

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

ボタンのクリックイベントで（たとえば）。

101
lepe

Formnovalidate属性を入力に追加します

    <input type="submit" name="go" value="Submit"> 
    <input type="submit" formnovalidate name="cancel" value="Cancel">

Class = "cancel"の追加は廃止されました

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

15
TastyCode

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

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

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

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

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

15
Daniel Garcia

フォームの送信時に検証されない検証を配線するときに、onsubmit：falseオプション（ documentation を参照）を使用できます。 。そして、asp：buttonにOnClientClick = $（ '＃aspnetForm'）。valid（）;を追加します。フォームが有効かどうかを明示的にチェックします。

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

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

10
BrokeMyLegBiking

（@lepeと@redsquareの拡張は、ASP.NET MVC + jquery.validate.unobtrusive.jsの回答です）

jquery validation plugin （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を配置できるようにするために思いついたものです。 Microsoftがこれを「修正」すると、このコードを取り消すことができます。

    // 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をセレクターに追加する必要がある場合があります）

3
Simon_Weaver

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

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

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

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

または

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

しかし、カスタムの必須バリデーターでは成功しません。送信を動的に呼び出すために、このコードで偽の非表示の送信ボタンを作成しました。

var btn = form.children('input.cancel.fakeSubmitFormButton');
if (btn.length === 0) {
    btn = $('<input name="FakeCancelSubmitButton" class="cancel fakeSubmitFormButton hide" type="submit" formnovalidate value="FakeCancelSubmitButton" />');
    form.append(btn);
}
btn.click();

検証を正しくスキップします:)

1
Davide Ciarmiello

フォームの送信用に2つのボタンがあります。saveおよびexitという名前のボタンは検証をバイパスします。

$('.save_exist').on('click', function (event) {
            $('#MyformID').removeData('validator');
            $('.form-control').removeClass('error');
            $('.form-control').removeClass('required');                
            $("#loanApplication").validate().cancelSubmit = true;
            $('#loanApplication').submit();
            event.preventDefault();
});
1
Bugfixer

最も柔軟な方法は、JQueryを使用することです。

event.preventDefault():

例えば。送信する代わりにリダイレクトしたい場合は、次のことができます：

$("#redirectButton").click(function( event ) {
    event.preventDefault();
    window.location.href='http://www.skip-submit.com';
});

または、別のエンドポイントにデータを送信できます（アクションを変更する場合など）。

$("#saveButton").click(function( event ) {
    event.preventDefault();
    var postData = $('#myForm').serialize();
    var jqxhr = $.post('http://www.another-end-point.com', postData ,function() {
    }).done(function() {
        alert("Data sent!");
    }).fail(function(jqXHR, textStatus, errorThrown) {
        alert("Ooops, we have an error");
    })

「event.preventDefault（）;」を実行したら検証をバイパスします。

1
Scott Mayers

これが最も簡単なバージョンです。誰かに役立つことを願って、

$('#cancel-button').click(function() {
    var $form = $(this).closest('form');
    $form.find('*[data-validation]').attr('data-validation', null);
    $form.get(0).submit();
});
0
Lucy