Question

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

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

我的COED

<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>

JQUERY

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

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

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

Answer 2

isValid = true;在return isValid;循环if

之前

if(document.getElementById('gb').style.display == "block") { /*[ your validation]*/
}

之后的其他代码包装完毕后

您的HTML代码不正确。您不能在另一个td内直接拥有td。如果您在span内添加div或p或td或任何其他元素而不是<td id="gb" style="display:none;">，那么这是一种很好的做法。

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

2 个答案: