假设目前有两行select分别为id cat 和 cow,js控制当value时空的option被选择时触发required输出错误信息
js部分省略
<select name="cat1" id="cat1" required>
<option value="">ーoption>
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
select>
<select name="cat2" id="cat2" required>
<option value="">ーoption>
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
select>
<select name="cow1" id="cow1" required>
<option value="">ーoption>
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
select>
<select name="cow2" id="cow2" required>
<option value="">ーoption>
<option value="1">1option>
<option value="2">2option>
<option value="3">3option>
select>
<div class="errorMsg">div>
<span>一个触发页面跳转页面span>
<script>
var validationObj = function(args) {
this.validObj = args.validObj;
this.realtime = args.realtime || null;
if (this.realtime) {
this.validObj.required = function() {
return true;
}
}
};
validationObj.prototype = {
valid: function(item) {
if (!this.realtime) {
item.closest('.inner').removeClass('error');
}
item.removeClass('error');
item.find('input').removeClass('error');
item.siblings('input').each(function() {
$(this).removeClass('error');
})
item.parent().removeClass('admission').removeClass('invalid');
item.closest('.section').children('p.errorMessage').remove();
if (item.val() !== "") {
item.parent().addClass('admission');
}
},
cat1: function(){
this.validObj.challenge('cat1', 'cat1') && this.validObj.required();
},
cat2: function(){
this.validObj.challenge('cat2', 'cat2') && this.validObj.required();
},
cow1: function(){
this.validObj.challenge('cow1', 'cow1') && this.validObj.required();
},
cow1: function(){
this.validObj.challenge('cow1', 'cow1') && this.validObj.required();
},
$.fn.form_check = function(e) {
var e = e || window.event;
var page = $.mobile.activePage;
$('div.inner,input', page).removeClass('error');
$('p.errorMessage,div.errorBox', page).remove();
$('span', page).removeClass('admission').removeClass('invalid');
if (e && $(e.target).closest('a').hasClass('back')) {
return true;
}
var v = new Validator();
var valid1 = new validationObj({
validObj: v
});
valid1.cat1();
valid1.cat2();
valid1.cow1();
valid1.cow2();
return !v.has_errors();
};
这样的话四个select都会在未输入时显示未输入错误信息,请问能否在cat1 cat2第一行的select都被选择非空的option的时候,禁用掉cow的validiton,也即是说即使第二行的cow的select选择value时空的option时也可以跳转,谢谢
$.fn.form_check = function (e) {
var e = e || window.event;
var page = $.mobile.activePage;
$('div.inner,input', page).removeClass('error');
$('p.errorMessage,div.errorBox', page).remove();
$('span', page).removeClass('admission').removeClass('invalid');
if (e && $(e.target).closest('a').hasClass('back')) {
return true;
}
var v = new Validator();
var valid1 = new validationObj({
validObj: v
});
valid1.cat1();
valid1.cat2();
if (cat1.value != '' && cat2.value != '') {//都不为空再执行验证,同时加上required property
$('#cow1,#cow2').prop('required',true)
valid1.cow1();
valid1.cow2();
}
else {//移除required property
$('#cow1,#cow2').prop('required', false)
}
return !v.has_errors();
};
可以使用逻辑操作符(例如&&和||)来实现此操作。可以创建一个变量(例如allCatSelected),用于存储cat1和cat2是否都选择了非空的option。如果是,那么就可以将cow1和cow2的required属性设置为false,以禁用它们的验证。在表单提交时,也可以使用此逻辑来验证所有字段。可以根据需要将此代码放置在form_check函数中的适当位置。代码示例如下:
```c++
var allCatSelected = ($('#cat1').val() !== '') && ($('#cat2').val() !== '');
if (allCatSelected) {
$('#cow1').prop('required', false);
$('#cow2').prop('required', false);
} else {
$('#cow1').prop('required', true);
$('#cow2').prop('required', true);
}
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!