Question

我正在使用通过 jQuery Validate 验证的表单。

当您点击表单的提交按钮并且必填字段为空时，输入框将出现“错误”错误。课程加入了它。

我使用 Nice Select JS 来自定义样式我的下拉框。它创建原始选择的display:hidden，然后创建相同列表项的div，然后对其进行样式化。

当我的表单被验证时，错误类被添加到表单中的原始选择，但不是生成的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 Validate如下：

<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回调用于添加/删除所有正在验证的元素的类。

使用条件代码检查要验证的元素，然后从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，则可能需要将条件调整为更通用的条件。

首次隐藏时，将错误类添加到辅助div＆＃39;选择＆＃39;有错误类

1 个答案: