jQuery验证错误消息fadeIn / Out

时间:2016-06-02 08:51:22

标签: javascript jquery html jquery-validate

我读了很多关于这个的话题,我尝试了很多东西,但很奇怪,我无法让它发挥作用...... 我想在显示验证错误消息时用fadeIn效果显示它。 然后当类改变时,意味着表单有效,错误文本应该是fadeOut ..

FIDDLE

HTML

<form id="MyForm">
    <select id="MySelect" name="select">
        <option value="">Select a value</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <button id="MyButton" type="submit">Submit</button>
</form>

jQuery

$(document).ready(function() {
    // Form Validate 
    $('#MyForm').validate({
        invalidHandler: function(element, form, validator) { 
        $(element.form).find("label[for=" + element.id + "]").hide().fadeIn("slow"); 
      },
        ignore: [],
        rules: {
            select: {
                required: true
            }
        },
        messages: {
            select: {
                required: "Value required"
            }
        },
        errorPlacement: function(error, element) {
            if (element.is('select:hidden')) {
                error.insertAfter(element.next('.nice-select')).fadeIn('4000');
            } else {
                error.insertAfter(element);
            }
        }
    });

    $('#MySelect').on('change', function() {
        $(this).valid();
    })

    // Activate NiceSelect 
    $('#MySelect').niceSelect();
});

任何帮助都会受到欢迎。

1 个答案:

答案 0 :(得分:1)

我通过以下方式让你的小提琴逐渐消失:

    errorPlacement: function(error, element) {
        if (element.is('select:hidden')) {
        error.fadeIn('99999').insertAfter(element.next('.nice-select'));
        } else {
            error.fadeIn('99999').insertAfter(element);
        }
    }
});

fadeOut应该是同一个想法。 (我改变了fadeIn(“”)值,因此我可以看到它正常工作