web-dev-qa-db-ja.com

jqueryでMVCフォームをリセットする

フォームをリセットするにはどうすればよいですか？

つまり、すべてのフィールドの値をクリアし、jqueryを使用してValidationSummaryエラーメッセージvalidation-summary-errorsを削除します。

以下のコードを使用しますが、機能しません。

    var validator = $("#myform").validate();
    validator.resetForm();

私はasp.net MVC3を使用しており、jqueryスクリプトがページに含まれています。

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
jqueryasp.net-mvcvalidationformsreset
23
Ghooti Farangi
$('.field-validation-error')
    .removeClass('field-validation-error')
    .addClass('field-validation-valid');

$('.input-validation-error')
    .removeClass('input-validation-error')
    .addClass('valid');
33
Darin Dimitrov

この問題に遭遇したときに、この問題を処理するための簡単なjQuery拡張機能を作成しました。

  • フィールドレベルの検証エラーをクリアします
  • 検証の概要をクリア/非表示にします
  • jQuery Validateの内部エラーリストをリセットします

フォーム内またはフォーム自体の$（selected）要素から呼び出すことができます。

以下は呼び出し例です（入力はフォーム内にあります）：

<input onclick="$(this).resetValidation()" type="reset" value="Reset" />

ここにjQueryプラグインコードがあります：

(function ($) {

    //re-set all client validation given a jQuery selected form or child
    $.fn.resetValidation = function () {

        var $form = this.closest('form');

        //reset jQuery Validate's internals
        $form.validate().resetForm();

        //reset unobtrusive validation summary, if it exists
        $form.find("[data-valmsg-summary=true]")
            .removeClass("validation-summary-errors")
            .addClass("validation-summary-valid")
            .find("ul").empty();

        //reset unobtrusive field level, if it exists
        $form.find("[data-valmsg-replace]")
            .removeClass("field-validation-error")
            .addClass("field-validation-valid")
            .empty();

        return $form;
    };
})(jQuery);

うまくいけば、これが役に立ちました！あなたはそれについてもっと読むことができ、私のブログ投稿の他のいくつかの例も見ることができます：

http://www.johnculviner.com/post/2011/11/16/ClearReset-MVC-3-Form-and-Unobtrusive-jQuery-Client-Validation.aspx

53
John Culviner

ネイティブソリューションを使用できます（1.9.0を検証+目立たない）

var $form = $(this).closest('form');

// reset errors with unobtrusive
$form.trigger('reset.unobtrusiveValidation');

// reset inputs
var validator = $form.validate(); // get saved validator
//validator.settings.ignore = ''; // if form hided (closed ui dialogs, etc)
validator.resetForm();
9
Towa48

Darin Dimitrovのメッセージからフォローアップするために、以下は検証の要約もクリアします...

$(".validation-summary-errors")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid");
4
Kennifer

ダリンとケニファーの答えを完成させるために、すべてをまとめて、最後の部分を追加して遅延検証を再度有効にしました

        //Reset validation message
        $('.field-validation-error')
        .removeClass('field-validation-error')
        .addClass('field-validation-valid');

        //Reset input, select and textarea style
        $('.input-validation-error')
        .removeClass('input-validation-error')
        .addClass('valid');

        //Reset validation summary
        $(".validation-summary-errors")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid");

        //To reenable lazy validation (no validation until you submit the form)
        $('form').removeData('unobtrusiveValidation');
        $('form').removeData('validator');
        $.validator.unobtrusive.parse($('form'));
1
Gudradain

次のコードは、findを使用して、最初にcontainerを検索し、次に子listを検索します。リストが空の場合、クラスvalidation-summary-validがコンテナに追加され、validation-summary-errors削除されました。

var container = $('form').find('[data-valmsg-summary="true"]');
var list = container.find('ul');

if (list && list.length) {
    list.empty();
    container.addClass('validation-summary-valid').removeClass('validation-summary-errors');
1
Barmeshwar Singh

これがお役に立てば幸い http://www.electrictoolbox.com/jquery-clear-form/

ハッピーコーディング

0
Ravia