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

私は、JörnZaeffereの優れた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'
}); 

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

例えば

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

この機能に関するjQuery Validatorのドキュメントは、こちらをご覧ください：送信時に検証をスキップする

編集：

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

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

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

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

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

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

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

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

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

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

入力にformnovalidate属性を追加する

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

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

このリンクで送信時に検証をスキップするためのドキュメントを参照してください

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

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

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

（の延長 @lepeのと@redsquareのための答えASP.NET MVC+ jquery.validate.unobtrusive.js）

の jQueryの検証プラグイン（ないマイクロソフト控えめ1）を使用すると、配置することができます.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ボタンを使用して送信する場合は、セレクタに追加する必要がある場合があります）

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

検証を正しくスキップしてください:)

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

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

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

最も柔軟な方法は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（）;」を実行したら 検証をバイパスします。

フォーム送信用の2つのボタンがあります。保存と終了という名前のボタンは検証をバイパスします。

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

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

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