Question

所以我正在处理一个看起来像这样的脚本

＆＃13;

<html>

CODE HTML WITH FORM ACTION POST

<script>
function chide() {
	document.getElementById("ccin").style.display = 'none';
    document.getElementById("naiss").style.display = 'none';
    		document.getElementById("account").style.display = 'none';


}
function ccheck(x) {
	chide();
	if(x == "variable1") {
		document.getElementById("account").style.display = '';
		document.getElementById("naiss").style.display = '';	}
		if(x == "variable2") {
		document.getElementById("account").style.display = '';

	}


</script>

<div>
                                        <td>
<tr><td width="560"><label> <font face="tahoma"> Your infos : </font></label></td>
                      <td width="">
                        <select style="width: 180px;" class="r_ddc_select" name="infos" onchange="ccheck(this.options[this.selectedIndex].value);" required="required">
                    <option value="">Select</option>
                    <option value="variable1">XXX</option>
                    <option value="variable1">YYY</option>
                    <option value="variable2">ZZZ</option>
                   

<input type="text" name="bithdate" required="" >

<input type="text" name="account" required="" >

<input type="text" name="ccin" required="" >

＆＃13;

问题是，当输入未显示时，例如变量2仅显示输入帐户，我无法提交表单，因为显然其他输入即使它们未显示在上面也会阻止它页面，我需要所有输入与所需的选项

Answer 1

required属性将始终阻止在输入未填充时提交表单，无论是否可见，只要它是DOM的一部分。作为一个简单的修复，我建议您在隐藏时禁用document.getElementById("account").required = false;，并在显示时再次启用它。

编辑：改进的功能建议

function chide() {
    document.getElementById("ccin").style.display = 'none';
    document.getElementById("naiss").style.display = 'none';
    document.getElementById("account").style.display = 'none';


    document.getElementById("ccin").required = false;
    document.getElementById("naiss").required = false;
    document.getElementById("account").required = false;
}
function ccheck(x) {
    chide();
    if(x == "variable1") {
        document.getElementById("account").style.display = '';
        document.getElementById("naiss").style.display = '';

        document.getElementById("account").required = true;
        document.getElementById("naiss").required = true;
    } else if(x == "variable2") {
        document.getElementById("account").style.display = '';
        document.getElementById("account").required = true;
    }

}

输入阻止提交表单

1 个答案: