jQuery validate - 防止显示错误标签答案

【问题标题】：jQuery validate - prevent the error label being displayedjQuery validate - 防止显示错误标签
【发布时间】：2013-10-23 11:40:35
【问题描述】：

我正在使用 jQuery 验证插件进行“实时”表单验证。我试图不显示出现的错误消息，因为它会影响布局等。

它会生成一个标签，弄乱我在页面上的样式，是否有可能根本不显示？

// the label it generates for an error
<label for="address_1" class="error">Please enter at least 2 characters.</label> 

$('#checkout-form').validate({
    rules: {
        first_name: {
            minlength: 2,
            required: true
        },
        last_name: {
            minlength: 2,
            required: true
        }
    },
    highlight: function (element) {
        $(element).addClass('#error')
          .closest('.form-group').removeClass('valid');
    },
    success: function (element) {
        element.addClass('valid')
          .closest('.form-group').removeClass('error');
    }
});

// custom css
<style type="text/css">
label.valid {
position: relative;
top: -25px;
right: 10px;
float: right;
width: 16px;
height: 16px;
background: url('/assets/images/icons/tick.png') center center no-repeat;
display: inline-block;
text-indent: -9999px;
}

label.nonvalid {
position: relative;
top: -25px;
right: 10px;
float: right;
width: 16px;
height: 16px;
background: url('/assets/images/icons/cross.png') center center no-repeat;
display: inline-block;
text-indent: -9999px;
}

【问题讨论】：

标签： jquery validation jquery-validate

【解决方案1】：

您需要设置showErrors 参数以包含您自己的逻辑，以便根据需要显示消息：

$('#checkout-form').validate({
    showErrors: function(errorMap, errorList) {
        // do something with the errors
    },
    // rest of your code...
});

【讨论】：

我添加了一些 CSS 代码 - 任何人都可以建议如何获取错误以在出现错误时显示 .nonvalid 类并且在没有错误时显示 .valid 类

【解决方案2】：

你可以用errorPlacement点赞，

$('#checkout-form').validate({
    errorClass:'error_border',
    rules: {
        first_name: {
            minlength: 2,
            required: true
        },
        last_name: {
            minlength: 2,
            required: true
        }
    },
    errorPlacement: function(error, element){
      /* Need to add this function to remove the error default placement */
    }
});

阅读Error handling in jQuery Validation Plugin

【讨论】：