当第一个隐藏 'select' 有错误 class 时，将错误 [​​=11=] 添加到辅助 div

Question

我使用的表单正在使用 jQuery Validate.

进行验证

当您点击表单的提交按钮并且必填字段留空时，输入框将添加一个 'error' class。

我使用 Nice Select JS 来自定义下拉框的样式。它创建原始 select 的 display:hidden，然后创建相同列表项的 div，然后设置样式。

验证我的表单时，错误 class 被添加到表单中的原始 select，而不是生成的 div。

代码如下：

<select id="selector" class="selector error" name="selector" style="display: none;">
    <option value="hide" selected="">RSVP</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

<div class="nice-select selector" tabindex="0">
    <span class="current">RSVP</span>
    <ul class="list">
        <li data-value="hide" class="option selected">RSVP</li>
        <li data-value="Yes" class="option">Yes</li>
        <li data-value="No" class="option">No</li>
    </ul>
</div>

我的jQuery验证如下：

<script type="text/javascript">
jQuery.validator.addMethod('answercheck', function (value, element) {
    return this.optional(element) || /^\b5\b$/.test(value);
}, "Oops, wrong answer silly");

$.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg != value;
 }, "Value must not equal arg.");

// validate contact form
$(function() {
    $('#contact').validate({
        ignore: [],
        rules: {
            selector: {
              valueNotEquals: "hide"
            },
            hiddenSelect: {
                required: true,
            },
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            message: {
                required: true
            },
            answer: {
                required: true,
                answercheck: true
            }
        },
        messages: {
            selector: {
                valueNotEquals: "Please select an option"
            },
            name: {
                required: "Go on, tell us your name",
                minlength: "Name must consist of at least 2 characters"
            },
            email: {
                required: "No email, no message"
            },
            message: {
                required: "Oops, you have to write something to send this form",
                minlength: "Go on, tell us more"
            },
            answer: {
                required: "Oops, try again"
            }
        },

        errorElement: "span",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {
        offset = element.offset();
            error.insertAfter(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'relative');
            //error.css('left', offset.left + element.outerWidth());
            error.css('bottom', offset.bottom);
        },

        submitHandler: function(form) {
            $(form).ajaxSubmit({
                type:"POST",
                data: $(form).serialize(),
                url:"php/contact.php",
                    success: function() {
                    $('#success').fadeIn();
                    $(form).fadeOut(500);
                },
                error: function() {
                    $('#error').fadeIn();
                }
            });
        }
    });

    $('select').niceSelect();

  $(".selector").on("click","li",function(){
    $("input[name='hiddenSelect']").val($(this).data("value"));
    var validator = $("#contact").validate();
    validator.form(); 
  });
});
</script>

我的jsFiddle

非常感谢！

Answer 1

highlight 和 unhighlight 回调用于来自正在验证的所有元素的 adding/removing 类。

使用条件代码检查正在验证的元素，然后 add/remove 来自 Nice Select 的 类 生成的元素。

$('#contact').validate({
    ignore: [],
    rules: { ... },
    highlight: function(element, errorClass, validClass) {
        // default
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
        // custom
        if (element.name === "selector") {
            $(element).siblings('div.nice-select').addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function(element, errorClass, validClass) {
        // default
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
        // custom
        if (element.name === "selector") {
            $(element).siblings('div.nice-select').removeClass(errorClass).addClass(validClass);
        }
    },
    // your other options, etc., ....

以上是一个非常粗略的例子，向您展示了正确的做法。但是，它非常特定于匹配某个 name 的元素。如果您在多个元素上使用 Nice Select，您可能需要将条件调整为更通用的内容。