1

私は JQuery Validator を使用しており、ここでスタックオーバーフローで多くのソリューションを見ました。すべての検証を「var」に入れてから、この「var」.resetForm() を使用してオブジェクトをリセットしましたが、これは機能しません。ここに私のJSFiddleがあります私の例で。

後で私の意図:同じフォーム、内部に異なる入力を持つ 2 種類のブロックを使用し、ブロックの 1 つが変更されたときに、検証をリセットするメソッドを呼び出して、送信しようとするときに Validate を再利用できるようにします。

 var validate = $('#cad_principal').validate({
      errorLabelContainer: $('.form_validate_message'),
      wrapper:'li',
      rules:{
        cad_pf_cpf:{required:true, minlength:11}
      },
      messages:{
        cad_pf_cpf:{required:"O campo CPF precisa ser preenchido.", minlength:"O campo CPF deve conter no mínimo 11 caracteres."}
      },
      submitHandler: function(form) {
        $(form).submit();
      }
  });

function cancelForm(){
    validate.resetForm();
}
4

3 に答える 3

4

呼び出そうとしている関数 ( cancelForm()) は存在しません。これを試して：

$(function() {  
    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper:'li',
        rules:{
            cad_pf_cpf:{required:true, minlength:11}
        },
        messages:{
            cad_pf_cpf:{required:"O campo CPF precisa ser preenchido.", minlength:"O campo CPF deve conter no mínimo 11 caracteres."}
        },
        submitHandler: function(form) {
            $(form).submit();
        }
    });

    $('#cad_principal a').click(function() { validate.resetForm(); });
});

基本的に、コードを DOMReady イベント内にラップし、イベント バインディングを使用してフォームを接続する必要があります。validateDOM の準備が整ったときにのみ変数が含まれることを覚えておいてください。これは動作中のjsFiddleです。

于 2013-02-14T13:52:11.180 に答える
1

$('form').get(0).reset();また、ハンドラーにa を追加しcancel clickて、フォームの内容をクリアしました。 ドキュメントによると、resetForm()これには別のプラグインが必要です...

制御されたフォームをリセットします。
入力フィールドを元の値にリセットし (フォーム プラグインが必要)、無効な要素を示すクラスを削除し、エラー メッセージを非表示にします。

これを試して：

jQuery :

$(document).ready(function () {

    var validate = $('#cad_principal').validate({
        errorLabelContainer: $('.form_validate_message'),
        wrapper: 'li',
        rules: {
            cad_pf_cpf: {
                required: true,
                minlength: 11
            }
        },
        messages: {
            cad_pf_cpf: {
                required: "O campo CPF precisa ser preenchido.",
                minlength: "O campo CPF deve conter no mínimo 11 caracteres."
            }
        }
    });

    $('#cancel').on('click', function (e) {
        e.preventDefault();
        validate.resetForm();
        $('form').get(0).reset();
    });

});

HTML :

<div class="form_validate_message"></div>
<form id="cad_principal" method="post">
    <input type="text" name="cad_pf_cpf" />
    <input type="submit" />
    <br />
    <a id="cancel" href="#">cancel</a>
</form>

実際のデモ: http://jsfiddle.net/rnryw/

于 2013-02-14T16:52:40.747 に答える
0

何も機能しない場合は、次のアプローチを試してください (特にデータをクリアする目的で):

1- フォーム html:

<input type='reset' class="button_grey resetForm" value='Reset'>

2-Jquery検証

// you can add error fields
var validator = $("#cad_principal").validate({
      focusCleanup: true
});

3-フォームをリセットする

$('[type="reset"]').on('click', function(){ 
      $("#cad_principal").closest('form').find("input[type=text], textarea").val(""); 
      $('input:checkbox').removeAttr('checked'); 
      validator.resetForm(); 
      return false;
});
于 2015-06-17T12:56:29.020 に答える