使用jQuery实现单选框关联表单校验通过后启用提交按钮

修正后可直接运行的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="radio" name="myfield" value="Field_One" checked="true" /> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two
<br><br>
<select name="country" id="country">
<option value="">Select</option>
<option value="us">US</option>
<option value="uk">UK</option>
<option value="za">Africa</option>
</select>
<br><br>
<select name="country2" id="country2">
<option value="">Select</option>
<option value="eg">Egypt</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
<option value="za">South Africa</option>
</select>
<br><br>
<input type="text" name="first_name" placeholder="First Name" />
<br><br>
<input type="text" name="last_name" placeholder="Last Name"/>
<br><br>
<div class="Field_One">
<input type="text" name="mobile_no" placeholder="Mobile no"/>
<br><br>
<input type="text" name="email" placeholder="Email"/>
</div>
<br>
<div class="Field_Two">
    <input type="text" name="reference_no" placeholder="Reference no" /><br><br>
    <input type="text" name="id_no" placeholder="ID no" />
</div>
<br>
<input type="text" name="trxid" placeholder="Trans ID" />
<input type="submit" id="button1" value="Submit" disabled/>

$(document).ready(function () {
    // 初始化字段状态
    toggleFields($('input[name="myfield"]:checked'));
    updateRequired();
    validation();

    // 单选切换事件绑定
    $('input[name="myfield"]').on('change', function () {
        toggleFields($(this));
        updateRequired();
        validation();
    });

    // 国家选择变化事件绑定
    $("#country").change(function(){
        const optionValue = $(this).val();
        optionValue == 'za' ? $("#country2").show() : $("#country2").hide();
        updateRequired();
        validation();
    }).change();

    // 所有输入/选择操作触发实时校验
    $('input, select').on('input change keyup', function () {
        validation();
    });

    // 字段显隐逻辑
    function toggleFields(radioEl) {
        const val = radioEl.val();
        if (val == "Field_One") {
            $(".Field_One").show();
            $(".Field_Two").hide();
            $("#country, [name='first_name'], [name='last_name']").show();
        } else if (val == "Field_Two") {
            $(".Field_Two").show();
            $(".Field_One").hide();
            $("#country, [name='first_name'], [name='last_name'], #country2").hide();
        }
    }

    // 动态更新必填属性
    function updateRequired() {
        // 先清空所有已有必填属性
        $('[required]').removeAttr('required');
        const activeRadio = $('input[name="myfield"]:checked').val();
        
        // 通用必填项配置
        $('[name="trxid"], [name="first_name"], [name="last_name"]').attr('required', true);

        if(activeRadio === 'Field_One') {
            $('#country, [name="email"]').attr('required', true);
            // 选中非洲时二级国家下拉设为必填
            if($('#country').val() === 'za') {
                $('#country2').attr('required', true);
            }
        }
    }

    // 整体校验逻辑
    function validation() { 
        let valid = true;
        const activeRadio = $('input[name="myfield"]:checked').val();

        // 校验所有可见必填项
        $('[required]:visible').each(function () {
            if ($(this).val().trim() == '') valid = false;
        });

        // Field_Two场景下二选一校验
        if(activeRadio === 'Field_Two') {
            const refVal = $('[name="reference_no"]').val().trim();
            const idVal = $('[name="id_no"]').val().trim();
            if(refVal === '' && idVal === '') valid = false;
        }

        // 控制提交按钮状态
        $('#button1').attr('disabled', !valid);
    }
});

核心修改说明 #

• 重构了必填项动态更新逻辑，覆盖通用必填、场景化必填、国家二级下拉的必填规则，同时支持select标签的必填校验
• 新增Field_Two场景下reference no和id no二选一的专属校验逻辑
• 补全了事件监听，所有输入、选择操作都会实时触发校验
• 显隐逻辑完全对齐需求，Field_Two场景下自动隐藏国家、姓名等不需要的字段，避免无效校验
• 校验逻辑过滤了隐藏字段，只有当前可见的必填项才会参与校验

内容的提问来源于stack exchange，提问作者Shawn