Отображать поля, когда пользователь выбирает конкретное значение из поля со списком - проблема логики проверки

У меня есть поле со списком, и из него можно выбрать 2 значения. Male или Female. Когда пользователь выбирает " Male отображается еще 2 текстовых поля. Эти 2 текстовые поля не могут быть пустыми (поскольку они проверяются).

Проблема. Когда пользователь выбирает " Female, два текстовых поля, описанные выше, скрыты, и мне не разрешено перейти к следующему экрану, не заполняя некоторые значения для этих двух полей (потому что он проверяется). Как я могу это решить?

My COde

<table>
 <tbody><tr>
 <td>
 <select id="gender" name="gender" onchange="genderfind(this.value);">
 <option value="female">female</option>
 <option value="male">Male</option>
 </select>
 </td>
 <td id="gb"> </td><td>
 </td>
<td> </td>
 <td>
 </td>
<td> </td>
 
 </tr>
</tbody></table>

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;

 }

///

2 ответа

После isValid = true; оберните остальную часть кода непосредственно перед return isValid; в if if(document.getElementById('gb').style.display == "block") {/*[ your validation]*/}

И ваш код HTML неверен. Вы не можете напрямую иметь td внутри другого td. Его хорошая практика, если вы помещаете элемент span или div или p или anyother вместо td внутри .


вызывайте функцию validateStep() только тогда, когда отображаются два поля.

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

licensed under cc by-sa 3.0 with attribution.