Question

我正在使用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>

现在，我想确保用户选择“选择一个选项”（默认选项）以外的任何内容。因此，如果您选择第一个选项，它将无法验证。怎么办呢？

Answer 1

只需在select

中添加一个必需的类

<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年），但我今天遇到了同样的问题并以这种方式解决了：

为您的选择标记添加名称属性。例如，在这种情况下

<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的解决方案才有效。如果您希望他的解决方案适用于多个选择，请在您的选择中添加名称属性。

希望它有所帮助！：）

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

您希望确保用户选择的内容除了＆＃34;选择一个选项＆＃34; （这是默认的）。因此，如果您选择第一个选项，它将无法验证。怎么办呢？

你可以通过简单的添加属性来实现这一点=＆＃34; required＆＃34;在select标签中。你可以在下面的代码中看到它

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

验证选择框

9 个答案: