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

我有两个元素（下拉列表），它们的位置非常接近。这些元素是必填字段

我正在使用jquery Valitate验证字段。当第一个控件的错误消息显示在元素附近时，两个元素都会显示错误消息，并且元素之间的间距会增加

$('#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"}
            }
        });

$（'RegisterForm'）。验证({
规则：{
国家：{必需：true}，
状态：{required:true}
},
信息：{
国家：{必需：“
选择国家”}，
状态：{required:“
选择状态”}
}
});

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

---

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

使用errorPlacement选项（请参阅此处的文档：）

---

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

在我的aspx网络表单上使用InsertAfter（）方法找到了解决方案：

jQuery（函数（）{

//执行验证！按ID指定换行元素、添加样式、类并在元素后插入错误消息

//应用规则

$（'[id*=element_to_validate]'）。规则（'add'{

required:true，
信息：{
必需：“
*一些验证文本”
}
});

}))

$('#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") );
        }
    });

$('#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]'));
    }
});

   required: true,
   messages: {
   required: '<br />* Some Validation Text'
    }
});