Suppose there are two rows of select for id cat and cow, required error message
<select name="cat1" id="cat1" required>
<option value="">ー</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="cat2" id="cat2" required>
<option value="">ー</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="cow1" id="cow1" required>
<option value="">ー</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="cow2" id="cow2" required>
<option value="">ー</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</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();
};
In this case, no input error information will be displayed when the four select are not input. Can we disable validiton of cow when the select of the first line of cat1 and cat2 is selected as non-empty option? That is to say, even if the cow select of the second line selects the option of value space-time, it can jump, thank you
0 Answer
You can use logical operators(e.g. & & And | |) to do this. You can create a variable(such as allCatSelected) that stores whether the non-empty option is selected for both cat1 and cat2. If so, you can set the required attribute for cow1 and cow2 to false to disable their validation. You can also use this logic to validate all fields at form submission time. This code can be placed in the appropriate place in the form_check function as needed. A code example is as follows:
```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);
}
这家伙很懒，什么都没留下...
