Question

我有一个隐藏的div，当从下拉列表中选择“其他”时，该文本框变为可见。

我要做的是验证它。选择其他时，应验证文本框字段，不要让表单提交。

我已经尝试但在隐藏文本框时不允许提交表单。

function validateForm()
{
var x=document.forms["form1"]["textbox"].value;
if (x==null || x=="")
{
alert("Text box be filled out");
return false;
}
}

如果选择了其他，则无法验证文本框字段，如果未选择其他并且文本框已隐藏则无法验证

这是我的代码

<head>
<script src="../Library/jqueryLatest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form action="index.cfm" method="post" name="form1"> 
<select name="description" id="description">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>
<div id="Other" class="showother" style="display:none">Hello <input name="textbox" id="textbox" type="text">
</div>
<input name="submit" value="SUBMIT" type="submit">   
</form>

</body> 
<script type="text/javascript"> 

$(function () {
$('#description').change(function () {
    $('.showother').hide();
    $('#' + $(this).val()).show();
});
});

</script>

Answer 1

<强>更新

function validateForm(){
   var x= $("form input#textbox").val();
   if ($('.showother').is(":visible")) {
    if (x==null || x=="")
    {
     alert("Text box be filled out");
     return false;
    }
   }
}
$(document).ready(function(){
 $('#description').change(function () {

    if ($(this).val() == "Other") {
       $('.showother').show();
    } else {
      $('.showother').hide();
    }

 });
});

演示http://jsfiddle.net/27Syr/643/

在下拉选择和验证时显示文本框

1 个答案: