Question

我有两个非常紧密的元素（下拉列表）。这些元素是必填字段。

我正在使用jquery valiate来验证字段。错误消息显示两个元素，并且元素之间的空间增加，因为第一个控件的错误消息显示在元素附近

$('#RegisterForm').validate({
        rules: {
            Country:{required: true},
            State:{required: true}
        },
        messages: {
            Country:{required: "Select Country"},
            State:{required: "Select State"}
        }
    });

我尝试在元素之前使用break作为：

$('#RegisterForm').validate({
            rules: {
                Country:{required: true},
                State:{required: true}
            },
            messages: {
                Country:{required: "<br/>Select Country"},
                State:{required: "<br/>Select State"}
            }
        });

当我这样做时，第二个元素移动到下一行。

如何在元素下方显示错误消息，而不会影响附近元素的对齐/放置。

Answer 1

使用 errorPlacement 选项（请参阅此处的文档：http://docs.jquery.com/Plugins/Validation/validate#toptions）

$('#RegisterForm').validate({
        rules: {
            Country:{required: true},
            State:{required: true}
        },
        messages: {
            Country:{required: "Select Country"},
            State:{required: "Select State"}
        },
        errorPlacement: function(error, element) {
            error.appendTo( element.parent("td").next("td") );
        }
    });

当然，您必须根据自己的情况调整代码。

Answer 2

在我的aspx webform上使用InsertAfter（）方法找到解决方案：

jQuery（function（）{

//进行验证！指定wrap元素，添加样式，类并在元素后面插入错误消息ID

$('#yourform').validate({
    wrapper: 'span',
      errorPlacement: function (error, element) {
        error.css({ 'color': '#FFA500', 'font-size': '0.750em' });     
        error.addClass("error")
        error.insertAfter($('[id*=element_before_error_message]'));
    }
});

//应用规则

$（'[id * = element_to_validate]'）。规则（'add'，{
   required: true,
   messages: {
   required: '<br />* Some Validation Text'
    }
});
}）;

在元素下面显示jquery验证错误

2 个答案: