javascript - 当用户从组合框中选择特定值时显示字段 - 验证逻辑问题

Question

我有一个组合框，可以从中选择 2 个值。要么Male要么Female。当用户选择时Male，会显示另外 2 个文本框。这 2 个文本框不能为空（因为它们正在被验证）。

问题：当用户选择Female时，上面讨论的 2 个文本框被隐藏，并且我不允许导航到下一个屏幕而不向这 2 个字段填充一些值（因为它正在被验证）。我该如何解决这个问题？

我的代码

<table>
    <tr>
        <td align="left">
            <select id="gender" name="gender" onchange='genderfind(this.value);'>
            <option value="female">female</option>
            <option value="male">Male</option>
            </select>
        </td>
        <td id="gb" style="display:none;"> <td>
            <input type="text" name="name" /></td>
<td align="left"><span id="msg_name"></span>&nbsp;</td>
 <td>
            <input type="text" name="lastname" /></td>
<td align="left"><span id="msg_lastname"></span>&nbsp;</td>
        </td>
    </tr>
</table>
</body>

查询

function validateStep() {

                var isValid = true;


                var un = $('#name').val();

                if (!un && un.length <= 0) {

                    isValid = false;

                    $('#msg_name').html('first name missing').show();

                } else {

                    $('#msg_name').html('').hide();

                }

                // validate password

                var l = $('#lastname').val();

                if (!l && l.length <= 0) {

                    isValid = false;

                    $('#msg_lastname').html('last name missing').show();

                } else {

                    $('#msg_lastname').html('').hide();

                }

                return isValid;

            }

///

<script>
function genderfind(val) {
            //alert(element);
            if (val == 'male' ) {
                document.getElementById('gb').style.display = 'block';
            } else {
                document.getElementById('gb').style.display = 'none';
            }

        }
</script>

Answer 1

isValid = true;将之前的其余代码包装return isValid;在一个if循环中之后if(document.getElementById('gb').style.display == "block") { /*[ your validation]*/ }

而且您的 HTML 代码不正确。您不能直接td在另一个内部拥有一个td。如果您放置spanor divor por any other element而不是td's inside ，这是一种很好的做法<td id="gb" style="display:none;">。

Answer 2

validateStep()仅当两个字段可见时才调用函数。

 if($('#msg_name').is(":visible")){
    validateStep ();
 })