验证选择框答案

【问题标题】：Validate select box验证选择框
【发布时间】：2010-11-19 06:56:12
【问题描述】：

我正在使用 jQuery 插件 Validation 来验证表单。我有一个如下所示的选择列表：

<select id="select">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

现在，我想确保用户选择除“选择一个选项”（这是默认选项）之外的任何内容。这样它就不会验证您是否选择了第一个选项。如何做到这一点？

【问题讨论】：

我实际上是因为在我的 jquery 中输入错误的其他地方而提出了这个问题......我没有任何问题让它按照你建议的方式工作。也许 jQuery 自 2009 年以来就实现了这个功能。
在这里查看我的答案stackoverflow.com/a/40909817/4251431

标签： javascript jquery html validation forms

【解决方案1】：

只需在 select 中添加一个 required 类

<select id="select" class="required">

【讨论】：

只要将值设置为空字符串就可以正常工作
@tjjjohnson 实际上，它只使用 <select class="required"><option /></select> 对我有用，没有别的。但问题是它没有选择我的自定义消息。有什么想法吗，@redsquare？
@Liam McCann 请注意，这是在 jquery mobile 诞生之前回答的！
抱歉，我应该打开一个新问题吗？不想让标记重复或抱怨它......我该怎么办？
我们可以在选择元素更改事件上实现吗？

【解决方案2】：

对于初学者，您可以“禁止”该选项被用户意外选择：

<option value="" disabled="disabled">Choose an option</option>

然后，在您的 JavaScript 事件中（不管是 jQuery 还是 JavaScript），让您的表单验证它是否已设置，请执行以下操作：

select = document.getElementById('select'); // or in jQuery use: select = this;
if (select.value) {
  // value is set to a valid option, so submit form
  return true;
}
return false;

或类似的东西。

【讨论】：

【解决方案3】：

我不知道在提出问题时（2009 年）插件的情况如何，但我今天遇到了同样的问题并以这种方式解决了：

给你的选择标签一个名字属性。例如在这种情况下

<select name="myselect">
不要在标签选项中使用属性 value="default"，而是按照 Jeremy Visser 的建议禁用默认选项或设置 value=""

<option disabled="disabled">Choose...</option>

或

<option value="">Choose...</option>
设置插件验证规则

$( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

或

<select name="myselect" class="required">

Obs: redsquare 的解决方案仅在您的表单中只有一个选项时才有效。如果您希望他的解决方案与多个选择一起使用，请在您的选择中添加一个名称属性。

希望对您有所帮助！ :)

【讨论】：

【解决方案4】：

<select id='bookcategory' class="form-control" required="">
                    <option value="" disabled="disabled">Category</option>
                    <option value="1">LITERATURE & FICTION</option>
                    <option value="2">NON FICTION</option>
                    <option value="3">ACADEMIC</option>
            <option value="4">CHILDREN & TEENS</option>

                </select>

HTML 表单验证可以由浏览器自动执行。试试上面的代码：
其余的都将自动完成，无需创建任何 js 函数，只需此下拉列表和提交按钮。

【讨论】：

您可能希望将 selected 属性添加到第一个选项，以便浏览器从该标签开始，使其对用户更可见。

【解决方案5】：

您要确保用户选择“选择一个选项”（这是默认选项）以外的任何选项。这样它就不会验证您是否选择了第一个选项。如何做到这一点？

您可以通过在选择标签中简单地添加属性 required = "required" 来做到这一点。你可以在下面的代码中看到它

<select id="select" required="required">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

它在 chorme、firefox 和 Internet Explorer 上对我来说效果很好。谢谢

【讨论】：

【解决方案6】：

const semesterValue = semester.value.trim();

   if(semesterValue == ""){
      setErrorForDropDown(semester,"Please select your semester");
      }else{
      setSuccessForDropDown(semester);
    }
    
function setErrorForDropDown(input,message){
      const formControl = input.parentElement;
      const small = formControl.querySelector('small');
      small.innerText = message;
      formControl.className = "drop-down error";   
    }
function setSuccessForDropDown(input){
      const formControl = input.parentElement;
      formControl.className = 'drop-down success';
    }

<div class = "drop-down">
                    <label for="semester">Semester</label>
                    <select name="semester" class= "select" id="select">
                        <option value = "">Select</option>
                        <option value="1st">1st</option>
                        <option value="2nd">2nd</option>
                        <option value="3rd">3rd</option>
                        <option value="4th">4th</option>
                        <option value="5th">5th</option>
                        <option value="6th">6th</option>
                        <option value="7th">7th</option>
                        <option value="8th">8th</option>
                    </select>
                    <small></small>
                </div>

【讨论】：

欢迎来到 Stack Overflow。没有任何解释的代码很少有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的问题并解释它如何回答所提出的具体问题。见How to Answer。

【解决方案7】：

if (select == "") {
    alert("Please select a selection");
    return false;

这应该适合你。它只是为我做了。

【讨论】：

【解决方案8】：

也许有更短的方法，但这对我有用。

<script language='JavaScript' type='text/javascript'>
    function validateThisFrom(thisForm) {
        if (thisForm.FIELDNAME.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME.focus();
            return false;
        }
        if (thisForm.FIELDNAME2.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME2.focus();
            return false;
        }
    }
</script>
<form onSubmit="return validateThisFrom (this);">
    <select name="FIELDNAME" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
    <select name="FIELDNAME2" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
</form>

【讨论】：

【解决方案9】：

   <script type="text/JavaScript">  
function validate() 
{
if( document.form1.quali.value == "-1" )
   {
     alert( "Please select qualification!" );
     return false;
   }
}

</script>
<form name="form1" method="post" action="" onsubmit="return validate(this);">
<select name="quali" id="quali" ">
        <option value="-1" selected="selected">select</option>
        <option value="1">Graduate</option>
        <option value="2">Post Graduate</option>
      </select> 
</form>





// this code works 110% tested by me after many complex jquery method validation but it is simple javascript method plz try this if u fail in drop down required validation//

【讨论】：