twitter-bootstrap Bootstrap JQuery 验证：输入和 <span class="add-on"> 之间的错误消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15227988/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 16:34:08 来源:igfitidea点击:
Bootstrap JQuery Validate: error message between input and <span class="add-on">
提问by JK87
When using Twitter Bootstrap and Jquery Validate in a combination everything goes right except when using a field with an (icon) add-on like:
当结合使用 Twitter Bootstrap 和 Jquery Validate 时，一切正常，除非使用带有（图标）附加组件的字段，例如：
<label>Datum:</label>
<div id="datum" class="input-append">
<input data-format="dd-MM-yyyy" type="text" name="datum" placeholder="Kies een datum..." />
<span class="add-on">
<i data-date-icon="icon-calendar"></i>
</span>
</div>
When there is an error the HTML looks like this:
当出现错误时，HTML 如下所示：
<label>Datum:</label>
<div id="datum" class="input-append">
<input data-format="dd-MM-yyyy" type="text" name="datum" placeholder="Kies een datum..." />
<label for="datum" generated="true" class="error" style="">Datum is verplicht.</label>
<span class="add-on">
<i data-date-icon="icon-calendar"></i>
</span>
</div>
And this is how it looks in the browser:
这是它在浏览器中的外观：
How to fix this? Hope someone can help!
如何解决这个问题？希望有人能帮忙！
EDIT
编辑
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{ onkeyup: false
//form validation rules
// LOGIN FORM
$("#loginform").validate({
onkeyup: false,
rules: {
gebruikersnaam: {
required: true
},
wachtwoord: {
onkeyup: false,
required: true,
minlength: 5,
}
},
messages: {
gebruikersnaam: {
required: "Vul aub een gebruikersnaam in."
},
wachtwoord: {
required: "Vul aub een wachtwoord in.",
minlength: "Wachtwoord moet minimaal 5 tekens langs zijn.",
},
},
submitHandler: function(form) {
form.submit();
}
});
// NIEUWE DISTRIBUTIE OPDRACHT
$("#distributieopdracht").validate({
onkeyup: false,
rules: {
opdrachtgever: {
required: false
},
datum: {
required: true
},
frequentie: {
required: true
},
actie: {
required: true
},
product: {
required: false
},
aantal: {
required: false,
digits: true
},
koeling: {
required: true
},
tarief: {
required: false,
decimal: true
},
naam: {
required: false,
naam: true
},
adres: {
required: false
},
plaats: {
required: false
},
telefoonnnummer: {
required: false,
telefoon: true
},
opmerkingen: {
required: false
},
},
messages: {
datum: {
required: "Datum is verplicht."
},
frequentie: {
required: "Frequentie is verplicht."
},
actie: {
required: "Keuze is verplicht."
},
aantal: {
digits: "Alleen getallen."
},
koeling: {
required: "Keuze is verplicht."
},
tarief: {
decimal: "Vul een geldig tarief in."
},
naam: {
naam: "Vul een geldige naam in."
},
telefoonnnummer: {
telefoon: "Vul een geldig telefoonnummer in."
}
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
EDIT
编辑
$(document).ready(function () {
$("#loginform").validate({
onkeyup: false,
rules: {
gebruikersnaam: {
required: true
},
wachtwoord: {
onkeyup: false,
required: true,
minlength: 5,
}
},
messages: {
gebruikersnaam: {
required: "Vul aub een gebruikersnaam in."
},
wachtwoord: {
required: "Vul aub een wachtwoord in.",
minlength: "Wachtwoord moet minimaal 5 tekens langs zijn.",
},
},
});
$("#distributieopdracht").validate({
onkeyup: false,
rules: {
opdrachtgever: {
required: false
},
datum: {
required: true
},
frequentie: {
required: true
},
actie: {
required: true
},
product: {
required: false
},
aantal: {
required: false,
digits: true
},
koeling: {
required: true
},
tarief: {
required: false,
decimal: true
},
naam: {
required: false,
naam: true
},
adres: {
required: false
},
plaats: {
required: false
},
telefoonnnummer: {
required: false,
telefoon: true
},
opmerkingen: {
required: false
},
},
messages: {
datum: {
required: "Datum is verplicht."
},
frequentie: {
required: "Frequentie is verplicht."
},
actie: {
required: "Keuze is verplicht."
},
aantal: {
digits: "Alleen getallen."
},
koeling: {
required: "Keuze is verplicht."
},
tarief: {
decimal: "Vul een geldig tarief in."
},
naam: {
naam: "Vul een geldige naam in."
},
telefoonnnummer: {
telefoon: "Vul een geldig telefoonnummer in."
}
},
errorPlacement: function(error, element) {
if (element.next().is('.add-on')) {
error.addClass('add-on').insertAfter(element.next('.add-on'));
} else {
error.insertAfter(element);
}
error.append(element.parent());
});
});
});
FORM
形式
<div id="distributie" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="distributieLabel" aria-hidden="true">
<form class="modal-form" action="submit.php" data-remote="true" method="post" id="distributieopdracht">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="distributieLabel">Nieuwe Distributie Opdracht</h3>
</div>
<div class="modal-body">
<label>Opdrachtgever:</label>
<input type="text" name="opdrachtgever" placeholder="Typ hier de opdrachtgever..." /><br />
<label>Datum:</label>
<div id="datum" class="input-append">
<input data-format="dd-MM-yyyy" type="text" name="datum" placeholder="Kies een datum..." />
<span class="add-on"><i data-date-icon="icon-calendar"></i></span>
</div>
<label>Frequentie:</label>
<select name="frequentie">
<option value="">Kies een frequentie...</option>
<option value="eenmalig">Eenmalig</option>
<option value="dagelijks">Dagelijks</option>
<option value="wekelijks">Wekelijks</option>
<option value="tweewekelijks">Twee-wekelijks</option>
<option value="maandelijks">Maandelijks</option>
<option value="jaarlijks">Jaarlijks</option>
</select><br />
<label>Actie:</label>
<select name="actie">
<option value="">Kies een actie...</option>
<option value="ophalen">Ophalen</option>
<option value="afleveren">Afleveren</option>
</select><br />
<label>Product:</label>
<input type="text" name="product" placeholder="Typ hier een product..." /><br />
<label>Aantal colli:</label>
<input type="text" name="aantal" placeholder="Typ hier het aantal..." /><br />
<label>Koeling:</label>
<select name="koeling">
<option value="">Kies een optie...</option>
<option value="ja">Ja</option>
<option value="nee">Nee</option>
</select><br />
<label>Tarief:</label>
<input type="text" name="tarief" placeholder="Typ hier een tarief..." /><br />
<label>Naam:</label>
<input type="text" name="naam" placeholder="Typ hier een naam..." /><br />
<label>Adres:</label>
<input type="text" name="adres" placeholder="Typ hier het adres..." /><br />
<label>Plaats:</label>
<input type="text" name="plaats" placeholder="Typ hier de plaats..." /><br />
<label>Telefoonnummer:</label>
<input type="text" name="telefoonnummer" placeholder="Typ hier het telefoonnummer..." /><br />
<label>Opmerkingen:</label>
<textarea rows="3" name="opmerkingen" placeholder="Typ hier eventuele opmerkingen..."></textarea>
</div>
<div class="modal-footer">
<input type="submit" value="Invoeren" class="btn btn-primary" />
<a href="#" class="btn" data-dismiss="modal">Annuleren</a>
</div>
</form>
</div>
EDIT
编辑
Current situation:
现在的情况：
Goal:
目标：
EDIT
编辑
errorPlacement: function (error, element) {
if (element.next().is('.add-on')) {
error.insertAfter(element.next('.add-on'));
} else {
error.insertAfter(element);
}
element.parent().insertAfter(error);
}
Working solution by @jani-hyytiainen:
@jani-hyytiainen 的工作解决方案：
errorPlacement : function(error, element) {
if (element.next().is('.add-on')) {
error.insertAfter(element.parent());
}
else {
error.insertAfter(element);
}
}
回答by Jani Hyyti?inen
Look at the errorPlacement option in here http://docs.jquery.com/Plugins/Validation/validate#toptions
看看这里的 errorPlacement 选项http://docs.jquery.com/Plugins/Validation/validate#toptions
$("#myform").validate({
errorPlacement: function(error, element) {
element.parent().append(error);
}
});
You can also test if there is an add-on present, change the placement of the error message, style it similarly to add on and so forth:
您还可以测试是否存在附加组件，更改错误消息的位置，将其样式设置为与附加组件类似，等等：
$("#myform").validate({
errorPlacement: function(error, element) {
if (element.next().is('.add-on')) {
error.addClass('add-on').insertAfter(element.next('.add-on'));
} else {
error.insertAfter(element);
}
}
});
It would look like this:
它看起来像这样：
Sorry, no icon for the calendar but it's the square after the input.
抱歉，日历没有图标，但它是输入后的方块。
回答by Muhammed Aslam C
I had this problem with Date picker validationin bootstrap 3.
To fix this, I checked if the element is date picker then display error outside the element's parent group, else perform the default action.
我在bootstrap 3 中遇到了日期选择器验证的问题。
为了解决这个问题，我检查了元素是否是日期选择器，然后在元素的父组之外显示错误，否则执行默认操作。
Here is the Final code.
这是最终代码。
errorPlacement: function(error, element) {
if ($(element).hasClass("date-picker") ) {
error.insertAfter($(element).closest('.input-group'));
}
else
{
error.insertAfter(element);
}
};
Hope this will help someone :)
希望这会帮助某人:)
