Display fields when user selects particular value from combo box - Validation logic issue

Display fields when user selects particular value from combo box -
Validation logic issue

I have a combo box, and there are 2 values to be selected from it. either
Male or Female. When user selects Male then another 2 textboxes gets
displayed. Those 2 text box cann't be empty (as they are being validated).
The problem : When the user selects Female, the 2 textboxes discussed
above is hidden, and I am not allowed to navigate to the next screen
without filling some values to those 2 fields (because its being
validated). How can i solve this?
My COde
<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>