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

How to ensure that dropdown field is a mandatory input field for submission

本文关键字：字段 提交 输入 何确保 确保      更新时间：2023-09-26

任务：

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

已经做了什么

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

我所做的就是强制增加这个字段。

问题：我已经设法使附加字段(只有当用户选择"其他"时才会显示附加字段(成为必填字段，但我似乎无法使下拉列表成为必填字段。因此，当用户从下拉列表中选择"名称a"时，当显示用户已选择"名称"选项时，它仍然会提示在其他字段中输入字段。

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

因此，如何使下拉列表成为必填字段的一部分？因此，只有当用户尚未选择任何选项时，必填字段提示才会出现，但当用户选择了任何选项时不会显示？

代码：

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

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

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

你可以在这里查看浏览器支持：

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

您可以使用jQuery Form validations Guide

例如，制作一个按钮并在单击时进行检查。

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

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

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

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

<script type="text/javascript">
 function checkForm() {
         if((document.getElementById("Details")).selectedIndex == 0)
        {
            alert('This field is required');
            return false;
        } 
        if((document.getElementById("Details")).selectedIndex == 4)
        {
            //other conditions
             if((document.getElementById("Name")).value == "Name"){
             alert('Last Element is selected, more info are required');
             return false;
             }
         }
        return true       
}
</script>

<form onsubmit="return checkForm()" method="post" action="#"  enctype="multipart/form-data">
<select name ="Details" id="Details" class="defaultValue required">
<option value ="0"> 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>
<!-- Code for additional fields when user select "Others": -->
<div id = "extradiv">
<input type="text" name="Name" id="Name" value="Name" title="Name" class="defaultValue required" tabindex="7" />
</div>
<input type="submit" />
</form>
相关文章：