jQuery Validation仅针对一个特定的选择字段显示错误消息(引导选择) [英] jQuery Validation show error message for only one specific select field (bootstrap-select)
问题描述
我正在使用bootstrap-select插件和jQuery Validation插件，并向select下拉列表(红色边框)添加了一些自定义错误状态.我几乎可以按需完成所有工作.我似乎无法弄清楚的一个问题是如何显示错误文本以及在一个输入字段中创建的自定义错误边框.我在表单验证中添加了addMethod，该方法正在检查18岁以上的年龄是否正常，但是当他们选择不符合addMethod要求的年龄时，错误消息必须与我创建的自定义红色边框一起显示(必须为18)
I am using bootstrap-select plugin along with jQuery Validation plug in and am adding some custom error states to the select dropdowns (red border). I almost have everything working as I would like. The one issue I cannot seem to figure out is how to display error text along with the custom error border I created on ONE of the input fields. I added an addMethod to the form validation which is checking for a min age of 18 which is working but the Error message needs to show along with the custom red border I have created when they select an age that does not meet the requirements of the addMethod (must be 18)
https://codepen.io/mDDDD/pen/qBZWpbj
html:
<div class="custom-select-box">
<select class="selectpicker select-input multiple select-month" name="dobMonth"
id="selectMonth">
<option selected="true" disabled="disabled">Month</option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<div class="dropdown-caret-div">
<i class="fal fa-angle-up"></i>
<i class="fal fa-angle-down"></i>
</div>
</div>
<div class="custom-select-box">
<select class="selectpicker select-input multiple select-day" name="dobDay" id="selectDay">
<option selected="true" disabled="disabled">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<div class="dropdown-caret-div">
<i class="fal fa-angle-up"></i>
<i class="fal fa-angle-down"></i>
</div>
</div>
<div class="custom-select-box">
<select class="selectpicker select-input multiple select-year" name="dobYear" id="selectYear">
<option selected="true" disabled="disabled">Year</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
</select>
<div class="dropdown-caret-div">
<i class="fal fa-angle-up"></i>
<i class="fal fa-angle-down"></i>
</div>
</div>
</div>
<!-- select box row-->
jQuery:
$userInfoForm.validate({
debug: true,
ignore: [],
rules: {
userIs: {
required: true,
},
dobMonth: {
required: true,
},
dobDay: {
required: true,
},
dobYear: {
minAge18: true,
minAge10: false,
required: true,
},
},
messages: {
userIs: 'This field is required.',
dobMonth: 'Date of birth is required.',
dobDay: 'Month is required.',
dobYear: {
minAge18:
'We're sorry but you need to be at least 18 years old to register.',
required: 'Year is required.',
},
},
errorPlacement: function (error, element) {
if ($(element).is('select')) {
$(element).parent('div').addClass('dropdown-has-error');
} else if ($(element).attr('name') === 'userIs') {
$(element).siblings('label.select-role').addClass('radio-has-error');
} else {
element.attr('placeholder', error.text());
}
},
success: function (label, element) {
$(element).parent('div').removeClass('dropdown-has-error');
$(element).siblings('label.select-role').removeClass('radio-has-error');
}
$('.selectpicker').on('change', function () {
$(this).valid();
if ($(this).hasClass('error')) {
$(this).parent('div').addClass('dropdown-has-error');
} else {
$(this).parent('div').removeClass('dropdown-has-error');
}
});
//add validator method - user must be at least 18 years of age
$.validator.addMethod(
'minAge18',
function (value, element) {
var yearToday = new Date().getFullYear();
value = parseInt(value, 10);
return yearToday - value >= 18;
},
'Update minAge18 error message in validator'
);
css:
.error {
color: red;
}
.radio-has-error::before {
border: 2px solid red;
}
.dropdown-has-error {
border: 2px solid red !important;
}
推荐答案
您没有错误消息，因为已从errorPlacement函数中消除了它们.
You don't have error messages because you've eliminated them from the errorPlacement function.
errorPlacement: function (error, element) {
if ($(element).is('select')) {
$(element).parent('div').addClass('dropdown-has-error');
} else if ($(element).attr('name') === 'userIs') {
$(element).siblings('label.select-role').addClass('radio-has-error');
} else {
element.attr('placeholder', error.text());
}
},
任何select都会遇到第一个条件，它只会添加一个类.
Any select is going to hit the first conditional, which only adds a class.
if ($(element).is('select')) {
$(element).parent('div').addClass('dropdown-has-error');
默认的errorPlacement函数包含类似以下内容的内容，而您忽略了它包含在任何位置...
The default errorPlacement function contains something like the following, which you've neglected to include anywhere...
error.insertAfter(element);
您有一个element.attr('placeholder', error.text())，它将仅将placeholder属性更改为错误消息，但仅当其他条件失败时才将其更改为错误消息.我不认为将placeholder用于错误消息是正确的GUI，因为那不是placeholder的本意...和AFAIK，在select元素上没有placeholder.
You have a element.attr('placeholder', error.text()), which will simply change the placeholder attribute into the error message, but only when the other conditionals fail. I don't think using the placeholder for error messages is proper GUI since that's not what a placeholder is supposed to be... and AFAIK, there is no placeholder on select elements.
因此，如果您丢失了消息，那是因为您已经覆盖了默认的errorPlacement，而没有将error对象插入到DOM中的任何位置.
So if you're missing messages, it's because you've overwritten the default errorPlacement without inserting the error object anywhere into your DOM.
话虽如此，您不应该使用errorPlacement来添加类.您仅应将其用于将消息放入布局中.放置后，插件会切换消息.如果在此处添加类，则需要以某种方式删除它们，这就是使用success回调所做的.但是，这还不是很正确.
That being said, you should not be using errorPlacement for adding classes. You should only use it for placing the message into your layout. Once placed, the plugin toggles the message. If you add classes here, then you would need to remove them somehow, which is what you're doing with the success callback. However, this all just isn't quite right.
-
errorPlacement用于将消息放入布局.
errorPlacementis for placing the message into the layout.
success 用于在元素有效时利用消息本身，例如放置一个绿色的选中标记.
success is for leveraging the message itself when the element is valid, such as placing a green checkmark.
如果要添加和删除类，请使用 highlight 和 unhighlight 回调函数，因为这正是此处要做的.
If you want to add and remove classes, then use the highlight and unhighlight callback functions as that's exactly what these are here to do.
这篇关于jQuery Validation仅针对一个特定的选择字段显示错误消息(引导选择)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
