Question

任务：

创建一个表单，其中有一个下拉列表，这是用户在提交前选择的必填字段。

已完成的工作

使用以下列表创建了一个下拉列表：名称1，名称2，名称3，其他。选择“其他”后，还有3个额外的必填字段需要在提交前回答。总之，所有领域都是强制性的。

我设法做的是使附加字段成为强制性的。

问题： 我已设法使附加字段（其他字段仅在用户选择“其他”时显示）强制执行，但我似乎无法使下拉列表成为必填字段。因此，当用户从下拉列表中选择“名称A”时，当显示用户已选择“名称A”选项时，它仍会提示在其他字段中输入字段。

-Name A，名称B和名称C已经存储了名称信息，只有当用户选择3个选项中的任何一个时才会反映名称。

因此，我如何使下拉列表成为必填字段的一部分？因此，强制字段提示仅在用户尚未选择任何选项时显示，但在用户对任何选项进行选择时不会显示？

代码：

<!-- Code that display fields when option has been selected: -->
<script>
function val(x) {
    document.getElementById("extradiv").style.display = x == "Others" ? "block" : "none";   
    document.getElementById("Name1").style.display = x == "Name 1" ? "block" : "none"; 
    document.getElementById("Name2").style.display = x == "Name 2" ? "block" : "none"; 
    document.getElementById("Name3").style.display = x == "Name 3" ? "block" : "none";
}
</script>

<!-- Dropdown code -->
<p>

<select name ="Details" id="Details" class="defaultValue required" onchange = "return val(this.value);">
<option value ="0" selected = "selected"> Select Name..</option>
<option value ="Name 1"> Name1</option>
<option value ="Name 2"> Name2</option>
<option value ="Name 3"> Name3</option>
<option value = "Others"> Others</option>
</select>
</p>

<!-- Code for additional fields when user select "Others": -->

<div id = "extradiv" style ="display:none">
<p>
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
</p>
<p>
<input type="text" name="RegistrationNum" id="RegistrationNum" value="Registration Num" title="Registration Num" class="leftCol defaultValue required validateInput formatNumber" tabindex="8" />
</p>
<p>
<input type="text" name="Address" id="Address" value="Address" title="Address" class="defaultValue required signupinput_txt" tabindex="9" />
</p>
</div>

Answer 1

如果您的目标浏览器支持html5验证，则可以使用html5验证。

<select required>
<option value="">empty select value</option>
<option value="blabla">blabla</option>
</select>

您可以在此处查看浏览器支持：

http://caniuse.com/#search=validation

Answer 2

例如，按一下按钮并检查点击。

＆＃13;

<script>
    function formSubmit(){
         if(document.getElementById('Details').value == 0){
            alert('Select Any One'); 
            document.getElementById('Details').focus();      
         }
         else if(document.getElementById('Details').value== 'Others' && document.getElementById('othersTxt').value==''){
            alert('fill the text box'); 
         }
         else {
            document.getElementById('dropdownForm').submit();
         }
    }
</script>

＆＃13;

<form id="dropdownForm">
    <select name ="Details" id="Details" class="defaultValue required" onchange = "return val(this.value);">
    <option value ="0" selected = "selected"> Select Name..</option>
    <option value ="Name 1"> Name1</option>
    <option value ="Name 2"> Name2</option>
    <option value ="Name 3"> Name3</option>
    <option value = "Others"> Others</option>
    </select>
    <input type="text" id="othersTxt">
    <input type="button" value="Submit" onclick="formSubmit();">
</form>

＆＃13;

Answer 3

您可以使用jQuery表单验证Guide

Answer 4

检查是否选择了该选项，然后输入更多条件。

Window

或

 <script type="text/javascript">
        if($("select[name='Details']").selectedIndex == 4)
        {
            //other conditions
            alert('Last Element is selected, more info are required');
        }
    </script>

编辑：也许你更喜欢这个：

<script type="text/javascript">
    if($("select[name='Details']").text == 'Others')
    {
        //some code
        alert('more info');
    }
</script>

如何确保下拉字段是提交的必填输入字段

4 个答案: