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

https://stackoverflow.com/questions/203844

03-07-2019
|

質問

J＆＃246; 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'
});

解決

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

e.g

<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 =＆quot; cancel＆quot;の追加廃止されました

このリンク

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

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

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

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

（ ASP.NET MVC + jquery.validate.unobtrusiveに対する @lepe および @redsquare の拡張機能の回答。 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 を配置できるようにするために思いついたものです。 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 を追加する必要がある場合があります）



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

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


また、＆quot; submit＆quot;という名前の input がないことを確認するか、 submit という名前の関数をオーバーライドします。
	


	
		
	
	
			最も柔軟な方法は、JQueryを使用することであることがわかりました。

event.preventDefault():


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

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


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


検証を正しくスキップします：）
	


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

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



	
		
			ライセンス： CC-BY-SA と 帰属
			所属していません StackOverflow