40

結果の検索フォームとノックアウト ベースのグリッドがあります。検索が実行されると、asp.net mvc でサーバー側の検証が行われ、モデルの状態が有効でない場合は、JSON を介してモデル エラーのリストが返されます。

jQuery 検証は既にセットアップされており、デフォルトの検証 (正規表現、必須など) はjquery.unobtrusiveプラグインを使用して自動的にマップされます。サーバーからのjson応答に基づいてエラーを動的に表示する方法を見つけまし$.validate().showErrors({prop:error})たが、フィールドを後でリセットできないため（input-validation-error class削除されないため）、サーバー検証メッセージを表示するためにこれを使用するのは適切な方法ではないと考えています。

に存在する場合、クライアントでエラーを設定およびリセットするための作業方法が必要です$.validate。

jsFiddle に関する私の問題の例があります: http://jsfiddle.net/goranobradovic/ughCm/

再現するには、[エラーを追加] をクリックしてから [エラーを削除] をクリックします。入力は赤のままです。

これは、検証によってトリガーされるルールを showErrors 関数が追加しないため、フィールドは「有効」のままであり、無効なフィールドから削除するためelements()に使用されるリストに含まれていないためです。resetForminput-validation-error class

基本的に、エラーを手動で設定したときにフォームの送信を回避し、invalid classエラーメッセージを削除した後に削除する必要があることを回避するために、クライアントで満たされないカスタムメッセージを使用して検証ルールを追加/削除する簡単な方法が必要です。

4

3 に答える 3

24

jQueryバリデーターのshowErrors関数を独自のものでオーバーライドすることでこれを解決しました。これは控えめに生成された検証スパンと互換性があり、無効なクラスを持つ有効なフィールドをクリーンアップします。これはあまり良い回避策ではありませんが、機能します。

ここに解決策のあるjsfiddleがあります：http://jsfiddle.net/goranobradovic/ughCm/5/

更新: サイトのガイドラインによると、外部サイトへのリンクは適切な回答ではないため、ここにコード サンプルを追加します。jQuery の検証に精通している人は、showErrors 関数の 2 行のコードを見てください。validator.settings.showErrors = showErrors; でバリデーターに割り当てました。

HTML:

<form id="experiment" action="/" method="post">

<fieldset>
  <legend></legend>
        <div class="editor-label">
          <label for="Email">Email</label>
        </div>
        <div class="editor-field">
<input data-val="true" data-val-email="&amp;#39;Email&amp;#39; not valid email address." data-val-required="&amp;#39;Email&amp;#39; is mandatory." id="Email" name="Email" type="text" value=""><span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>        
        </div>
        <div class="editor-label">
          <label for="FirstName">First name</label>
        </div>
        <div class="editor-field">
          <input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="">
          <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
          <label for="LastName">Last name</label>
        </div>
        <div class="editor-field">
          <input class="text-box single-line" id="LastName" name="LastName" type="text" value="">
          <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
        </div>   
</fieldset>
    <p>
        <button type="submit" class="save ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" value="Save" role="button" aria-disabled="false"><span class="ui-button-text">Save</span><span class="ui-button-icon-secondary ui-icon ui-icon-disk"></span></button>

    </p>
</form>
<br/>

<button id="add">Add error</button>
<button id="remove">Remove error</button>

<br/>
<br/>
Debug:
<div id="debug"></div>

JavaScript:

var validator = {};

function addError(e) {
    validator.showErrors({
        "FirstName": "test error"
    });
}

function removeError(e) {
    validator.showErrors({
        "FirstName": null
    });
    fixValidFieldStyles($("form"), validator);
}

$(document).ready(function() {
    var $form = $("#experiment");
    // prevent form submission
    $form.submit(function(e) {
        e.preventDefault();
        return false;
    });
    $("#add").click(addError);
    $("#remove").click(removeError);
    $("#debug").html("<h1>Validator properties:</h1>");
    validator = $form.validate();
    validator.settings.showErrors = showErrors;
    for (var i in validator) {
        var row = $("<span></span>").html(i).append("<br/>");
        $("#debug").append(row);
    }
});


function showErrors(errorMessage, errormap, errorlist) {
    var val = this;
    errormap.forEach(function(error, index) {
        val.settings.highlight.call(val, error.element, val.settings.errorClass, val.settings.validClass);
        $(error.element).siblings("span.field-validation-valid, span.field-validation-error").html($("<span></span>").html(error.message)).addClass("field-validation-error").removeClass("field-validation-valid").show();
    });
}

function fixValidFieldStyles($form, validator) {
    var errors = {};
    $form.find("input,select").each(function(index) {
        var name = $(this).attr("name");
        errors[name] = validator.errorsFor(name);
    });
    validator.showErrors(errors);
    var invalidFields = $form.find("." + validator.settings.errorClass);
    if (invalidFields.length) {
        invalidFields.each(function(index, field) {
            if ($(field).valid()) {
                $(field).removeClass(validator.settings.errorClass);
            }
        });
    }
}
于 2012-10-10T21:48:34.580 に答える
9

私はもう少し単純なことをしました - 基本的に、バリデーターにエラーをより完全に登録する機能を追加しました。jquery.validate.js (showErrors の下) に以下を追加しました。

addErrors: function (errors) {
        for (var i = 0; i < errors.length; i++) {
            this.errorList.push({
                element: $(errors[i].element)[0],
                message: errors[i].message
            });
        }           
        this.showErrors();
    },

次に、 form.validate().showErrors() を呼び出す代わりに、たとえば行うことができます

form.validate().addErrors([{
    element: $('#myinput'),
    message: 'A manual error message'
}]);

最後に、送信時にフォームが無効としてマークされていない可能性があるため、キーアップなどで検証を強制することができます。

$('#myinput').one('keyup', function(){ $(this).valid(); });

（注：これは戦闘でテストされていませんが、少なくとも解決策がどこかにあると確信しています）

于 2015-06-12T10:04:17.190 に答える
5

エラーを消去してから新しいエラーを表示するという簡単な方法で問題を解決することになりました。

// get the form inside we are working - change selector to your form as needed
var $form = $("form");

// get validator object
var $validator = $form.validate();

// get errors that were created using jQuery.validate.unobtrusive
var $errors = $form.find(".field-validation-error span");

// trick unobtrusive to think the elements were succesfully validated
// this removes the validation messages
$errors.each(function(){ $validator.settings.success($(this)); })

// clear errors from validation
$validator.resetForm();

// Then show the errors
$.validator().showErrors({prop:error}
于 2016-07-14T21:41:02.910 に答える