如何在我的文本输入的一侧定位 Jquery validate() 错误消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19417801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to position Jquery validate() error message along the side of my text input
提问by Spilot
As you'll see in my code I'm been using the errorPlacement method. I first tried using an if else statement inside the method and the error message would at least show, but only underneath the input, not along side like I want. Since I have 6 inputs to test, I'm using the switch statement, which won't work for me at all. I have some css applied to the divs that the inputs are in, I don't know if this is interfering with where the message goes or what.
正如您将在我的代码中看到的，我一直在使用 errorPlacement 方法。我首先尝试在方法内使用 if else 语句，错误消息至少会显示，但只显示在输入下方，而不是像我想要的那样。因为我有 6 个输入要测试，所以我使用的是 switch 语句，这对我根本不起作用。我有一些 css 应用于输入所在的 div，我不知道这是否会干扰消息的去向或什么。
HTML
<div id ="column1">
<label>Name of Show</label><input type="text" name="performance" id="performance" />
<label>Name of location</label> <input type="text" name="location" id="location"/>
<label>Date</label> <input type="text" id="date" name="date"/>
</div>
<div id="column2">
<label>Time</label><input type="text" id="time" name="time"/>
<label># of Volunteers Needed</label><input type="text" id="guests" name="guests"/>
<label>Cover</label><input type="text" id="price" name="price"/>
</div>
JS
//this is just the error placement block, the other validate() code is working fine and omitted
errorPlacement: function(error, element){
switch(element)
{
case element.attr("name") === 'performance':
error.insertAfter( $("#performance") );
break;
case element.attr("name") === 'location':
error.insertAfter( $("#location") );
break;
case element.attr("name") === 'date':
error.insertAfter( $("#date") );
break;
case element.attr("name") === 'time':
error.insertAfter( $("#time") );
break;
case element.attr("name") === 'guests':
error.insertAfter( $("#guests") );
break;
case element.attr("name") === 'price':
error.insertAfter( $("#price") );
break;
default:
//nothing
}
},
回答by Sparky
Your code:
您的代码：
errorPlacement: function (error, element) {
switch (element) {
case element.attr("name") === 'performance':
error.insertAfter($("#performance"));
break;
case element.attr("name") === 'location':
error.insertAfter($("#location"));
break;
case element.attr("name") === 'date':
error.insertAfter($("#date"));
break;
case element.attr("name") === 'time':
error.insertAfter($("#time"));
break;
case element.attr("name") === 'guests':
error.insertAfter($("#guests"));
break;
case element.attr("name") === 'price':
error.insertAfter($("#price"));
break;
default:
//nothing
}
},
Your code is unnecessarily repetitive, to say the least, and a bit redundant.
你的代码是不必要的重复，至少可以说，有点多余。
error.insertAfter(element)is already the default and it generically applies to allfields automatically. There is no need to over-ride this unless you want to do something else.
error.insertAfter(element)已经是默认值，它通常自动应用于所有字段。除非你想做其他事情，否则没有必要超越它。
This is the default errorPlacementfunction:
这是默认errorPlacement功能：
errorPlacement: function(error, element) {
error.insertAfter(element); // <- the default
},
error- the labelobject containing the error message.element- the input object with the error.
error-label包含错误消息的对象。element- 有错误的输入对象。
As you can see, you do not need to specify errorPlacementat all if you simply want each error messages to be inserted after each element.
如您所见，errorPlacement如果您只是希望在每个元素之后插入每个错误消息，则根本不需要指定。
See this jsFiddle which shows the default error message placement:
请参阅此 jsFiddle，其中显示了默认错误消息位置：
You can "un-comment" the errorPlacementsection and see that the behavior is exactly identical:
您可以“取消注释”该errorPlacement部分并查看行为完全相同：
If you're not getting the expected message placement, it's either because your CSS is moving it, your HTML layout is blocking or wrapping it, or some combination of both. You have not shown enough code for me to duplicate anything meaningful.
如果您没有获得预期的消息位置，可能是因为您的 CSS 正在移动它，您的 HTML 布局正在阻止或包装它，或者两者的某种组合。你没有显示足够的代码让我复制任何有意义的东西。
However, if you want to try to apply some CSS to only the error messages, use something like this, assuming you're using the default error container, <label>, and the default error class, .error...
但是，如果您想尝试仅将一些 CSS 应用于错误消息，请使用类似的方法，假设您使用的是默认错误容器<label>和默认错误类.error...
label.error {
/* my custom css */
}
回答by Randika Vishman
I get the above Questions code used in my project,meaningfully but bit altered than it is in the question!
我得到了在我的项目中使用的上述问题代码，有意义但比问题中有所改变！
For two input tags (I had actually used that 2 input tags with Twitter Bootstrap, dateTimePickerplugin) I have put an additional divbellow the two Date picker fields, with two spans with two different IDs (jqv_msg3, jqv_msg4)and put the following as my jQuery Validation script:
对于两个输入标签（我实际上使用了 2 个带有Twitter Bootstrap,dateTimePicker插件的输入标签），我div在两个日期选择器字段下方添加了一个额外的波纹管，其中包含两个具有两个不同 ID ( jqv_msg3, jqv_msg4) 的跨度，并将以下内容作为我的jQuery Validation script：
errorElement: 'p',
errorClass: 'jq_err_msg text-danger',
errorPlacement: function(error, element) {
switch (element.attr("name")) {
case 'datePicker1':
error.insertAfter($("#jqv_msg3"));
break;
case 'datePicker2':
error.insertAfter($("#jqv_msg4"));
break;
default:
error.insertAfter(element);
}
}
So the above code will produce, Ptag with class of jq_err_msg text-dangerbut for elements which have datePicker1and datePicker2, it puts the error messages in side the divI have put, and after each of the two spanswith IDs of jqv_msg3and jqv_msg4!!!
因此，上面的代码将生成P带有类的标记，jq_err_msg text-danger但是对于具有datePicker1and 的元素datePicker2，它将错误消息放在divI 放置的旁边，并在两个spansID 分别为jqv_msg3and 之后jqv_msg4！
So I could place the error messages as wherever I intended to in this way, specifically for each of the input I need to do it! :-D
因此，我可以将错误消息放在我打算以这种方式放置的任何位置，特别是对于我需要执行的每个输入！:-D
Hint:
暗示：
But please keep that in mind, I have altered the Switchstatement to be suitable for the requirement and also the way it will work in.
但请记住这一点，我已经修改了Switch语句以适应要求及其工作方式。
