验证选择框

Question

我正在使用 jQuery 插件验证来验证表单。 我有一个看起来像这样的选择列表：

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

现在，我想确保用户选择的不是“选择一个选项”（这是默认选项）。 这样如果您选择第一个选项，它就不会验证。 如何才能做到这一点？

Answer 1

只需在 select 中添加一个 required 类

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

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

或者类似的东西。

Answer 3

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

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

   <select name="myselect">

2. 不要使用标签选项中的属性 value="default"，而是按照 Jeremy Visser 的建议禁用默认选项或设置 value=""

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

   或者

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

3. 设置插件验证规则

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

   或者

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

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

希望能帮助到你！ :)

Answer 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 函数，只需这个下拉菜单和一个提交按钮。

Answer 5

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

那应该对你有用。 它只是为我做的。

Answer 6

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

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

Answer 7

您想确保用户选择的不是“选择一个选项”（这是默认选项）。 这样如果您选择第一个选项，它就不会验证。 如何才能做到这一点？

您可以通过在 select 标签中简单地添加属性 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 中对我来说效果很好。 谢谢

Answer 8

 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>

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