jquery - jQuery Validate 插件和 NiceSelect:验证错误
问题描述
我正在使用 jQuery Validator 和 jQuery Nice-Select 插件,但在尝试验证表单时遇到了两个问题。看一看:
这是html:
<form id="ads-form" data-aos="zoom-out-down" method="post" data-aos-duration="300" data-aos-delay="150" data-aos-once="true" id="the-form" class="cads-form">
<!-- Form Fileds -->
<div id="ads-section" class="ads-container">
<label class="control-label label-cads">* State:</label>
<select class="dropdown-content ads-n wide" id="ads-state" name="ads-state">
<option data-display="Select State" selected></option>
<option value="ST1">State 1</option>
<option value="ST2">State 2</option>
<option value="ST3">State 3</option>
</select>
<label class="control-label label-cads">* City:</label>
<select class="dropdown-content n-city wide" id="ads-city" name="ads-city">
<option data-display="Select City" selected></option>
<option value="CT1">City 1</option>
<option value="CT2">City 2</option>
<option value="CT3">City 3</option>
</select>
<div class="text-center ca-button-wrap">
<br/><br/>
<button class="btn btn-default cads-button" id="ads-button" type="submit">NEXT <i class="fas fa-angle-double-right"></i></button>
</div>
</div>
</form>
CSS:
body {
background-color: #0C2738;
}
form {
margin: 2%;
}
.nice-select {
margin: 1%;
}
button {
margin: 1% 0 0 0;
}
.error {
color: #DDAA40;
}
JS:
$(document).ready(function() {
<!--Nice select Init -->
$('#ads-state, #ads-city').niceSelect();
<!--Validate Plugin-->
$(function(){
$("#ads-form").validate(
{
ignore: [],
rules:
{
'ads-state':
{
required: true,
},
'ads-city':
{
required: true,
},
},
messages:
{
'ads-state':
{
required: "Select a State"
},
'ads-city':
{
required: "Select a City"
},
}
});
});
<!-- Remove error on Select change-->
$('#ads-state').change(function () {
$(this).valid();
});
});
如果选择为空白,则当我单击“下一步”按钮时,验证工作正常。但是在选择状态时,仍然会显示错误消息。此外,选择“城市”时选择空选项时不会显示错误消息。会发生什么?
解决方案
推荐阅读
- java - 为什么按钮不转到下一个活动
- java - 我正在尝试反序列化 XML 并为某些属性获取 null
- android - 使用用户名和密码自定义 Firebase 身份验证
- python - 如何在 Pandas 中加入年份和月份的列?
- ios - 为什么我的 UILabel 不符合初始框架?
- c++ - 以固定频率切换 Raspberry Pi 的 GPIO
- javascript - 如何使用 axios 从 servlet 中获取数据,然后对其进行交叉过滤并通过 highcharts 显示
- javascript - 表中列的总和值
- python - 蟒蛇预测
- python - 在 pythonanywhere 上部署网站会出现与 Numpy 相关的错误