javascript触发的select的requierd问题

假设目前有两行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);
}




您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632