jQuery Validate - 將錯誤類添加到Parent Div

Question

我正在使用jQuery Validate插件，並且永遠找不到顯示復選框錯誤的好方法。 如果沒有選中，我想以紅色突出顯示所有復選框標簽，並決定通過向包含復選框和復選框標簽的div添加錯誤類來執行此操作。 但是，它似乎沒有添加類。 我沒有正確選擇div嗎？

HTML：

<div class="left-aligned indent">

    <label id="id_label" for="id" class="label">Items:</label>

    <div class="select-group">

        <input type="checkbox" name="items" value="1" id="item_1" />
        <label class="checkbox">Item #1</label><br />

        <input type="checkbox" name="items" value="1" id="item_2" />
        <label class="checkbox">Item #2</label><br />

        <input type="checkbox" name="items" value="1" id="item_3" />
        <label class="checkbox">Item #3</label><br />

    </div>

</div>

使用Javascript：

$().ready(function() {

    $('#addForm').validate({
        rules: { 
            "items": { 
                required: true, 
                minlength: 1 
            } 
        }, 
        errorPlacement: function(error, element) {
            if (element.is(':checkbox')) {
                $(this).prev("div").addClass('checkbox-error');
            }
            else {
                 return true;
            }
         }
    }); 


});

CSS：

.error {
    background-color: #FF898D;
    border: 1px solid #000;
}

.checkbox-error {
    color: #FF898D;
}

Answer 1

這應該工作：

    $('#myform').validate({
    highlight: function(element) {
        $(element).parent().addClass("field-error");
    },
    unhighlight: function(element) {
        $(element).parent().removeClass("field-error");
    }
    });

查看文檔以獲取更多選項：

• http://jqueryvalidation.org/validate/

Answer 2

$(element).parent('div').addClass('checkbox-error');

Answer 3

從我在使用jquery驗證發生驗證錯誤時將類添加到父div的答案，因為我相信它為這個問題的現有答案增加了價值......

訪問驗證器設置

第一項業務是修改表單驗證器上的settings對象。 您可以通過以下任何方式執行此操作：

1. 在通過調用jQuery.validator.setDefaults()為所有表單加載表單之前
2. 通過在.validate([options])入選項來初始化表單時
3. 初始化之后，通過使用$("form").data("validator").settings上的驗證器對象

由於您使用的是MVC，選項＃2是不可能的，因為不顯眼的驗證會自動初始化表單。 所以讓我們繼續使用選項3 - 這里的目標只是為了能夠自定義表單上的設置。

覆蓋默認行為

我們要修改的默認方法是highlight和unhighlight ，它們將分別突出顯示無效字段或還原高亮選項所做的更改。 根據源代碼，這是他們的默認行為：

highlight: function( element, errorClass, validClass ) {
    if ( element.type === "radio" ) {
        this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
    } else {
        $( element ).addClass( errorClass ).removeClass( validClass );
    }
},
unhighlight: function( element, errorClass, validClass ) {
    if ( element.type === "radio" ) {
        this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
    } else {
        $( element ).removeClass( errorClass ).addClass( validClass );
    }
}

所以你在這里也有幾個選擇。

1. 完全替換這些功能並自行編寫
2. 包裝這些功能並像平常一樣調用它們，但在之前或之后添加您自己的自定義代碼。

選項1 - 替換批發

這條路很容易。 只要在那里寫下你想要的任何東西。 也許來自源代碼的種子，也許做自己的事情。

var valSettings = $("form").data("validator").settings
valSettings.highlight = function(element, errorClass, validClass) { ... }
valSettings.unhighlight = function(element, errorClass, validClass) { ... }

選項2 - 包裹功能

這種侵入性較小，因此在大多數情況下可能更為可取。

由於最終您將替換valSettings.highlight的值， valSettings.highlight您需要訪問原始函數的干凈原始版本。 您可以保存自己的，也可以從全局默認值中刪除一個

// original highlight function
var highlightOriginal = $("form").data("validator").settings.highlight;
var highlightDefaults = $.validator.defaults.highlight

在包裝的JavaScript函數而言，有幾個例子在這里 ， 在這里 ，和這里 ）。 以下是其中一個示例的解析示例，它將幫助跨函數調用綁定this上下文，保留傳遞的參數的arity，並保留返回值：

function wrap(functionToWrap, beforeFunction) {
    return function () {
        var args = Array.prototype.slice.call(arguments),
        beforeFunction.apply(this, args);
        return functionToWrap.apply(this, args);
    };
};

然后，您還必須快速定義在調用時要觸發的任何其他行為。 在這種情況下，讓我們找到最接近元素的父div並更新它的類，如下所示：

function highlightDecorator(element, errorClass, validClass) {
    $(element).closest("div").addClass(errorClass).removeClass(validClass);
}

全部包裝 ^{（看看我在那里做了什么）}

$(function () {
  var valSettings = $("form").data("validator").settings
  valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
  valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
});

function wrap(functionToWrap, beforeFunction) {
  return function () {
    var args = Array.prototype.slice.call(arguments);
    beforeFunction.apply(this, args);
    return functionToWrap.apply(this, args);
  };
};

function highlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(errorClass).removeClass(validClass);
}
function unhighlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(validClass).removeClass(errorClass);
}

因此，當我們結合所有上述函數時，它應該看起來像這樣：

Stack Snippets和jsFiddle中的工作演示

 $(function () { var valSettings = $("form").data("validator").settings valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator) valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator) }); function wrap(functionToWrap, beforeFunction) { return function () { var args = Array.prototype.slice.call(arguments); beforeFunction.apply(this, args); return functionToWrap.apply(this, args); }; }; function highlightDecorator(element, errorClass, validClass) { $(element).closest("div").addClass(errorClass).removeClass(validClass); } function unhighlightDecorator(element, errorClass, validClass) { $(element).closest("div").addClass(validClass).removeClass(errorClass); } 

 input.input-validation-error { border: solid 1px red; } .input-validation-error label { color: red; } 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script> <form action="/Person" method="post"> <div class="required"> <label for="Name">Name <em>*</em></label> <input id="Name" name="Name" type="text" value="" data-val="true" data-val-required="The Name field is required."/> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span> </div> <input type="submit" value="Save" /> </form>