blocks|key|1263595|text|只需将一个required类添加到select|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1263596|<select+id="select"+class="required">|code-block|syntax|javascript|1263597|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just add a class of required to the select</p>

<pre><code>&lt;select id="select" class="required"&gt;
</code></pre>


blocks|key|1478270|text|对于初学者，您可以“禁止”该选项被用户意外选择：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478271|<option+value=""+disabled="disabled">Choose+an+option</option>|code-block|syntax|javascript|1478272|然后，在您的JavaScript事件(不管它是jQuery还是JavaScript)中，为了让您的表单验证是否设置了它，请执行以下操作：|1478273|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;|1478274|或者其他类似的东西。|1478275|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>For starters, you can "disable" the option from being selected accidentally by users:</p>

<pre><code>&lt;option value="" disabled="disabled"&gt;Choose an option&lt;/option&gt;
</code></pre>

<p>Then, inside your JavaScript event (doesn't matter whether it is jQuery or JavaScript), for your form to validate whether it is set, do:</p>

<pre><code>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;
</code></pre>

<p>Or something to that effect.</p>


blocks|key|1263752|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1263753|HTML表单验证可以由浏览器自动执行。尝试上面的代码：|unstyled|1263754|其余的都将自动完成，不需要创建任何js函数，只需此下拉菜单和提交按钮即可。|1263755|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

                &lt;/select&gt;
</code></pre>

<p>HTML form validation can be performed automatically by the browser.
Try the above code:<br>
The rest all will be done automatically, no need to create any js functions just this dropdown and a submit button.</p>


blocks|key|1478472|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478473|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';
++++}++++|code-block|syntax|javascript|1478474|<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>|1478475|1478476|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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';
    }    </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class = "drop-down"&gt;
                    &lt;label for="semester"&gt;Semester&lt;/label&gt;
                    &lt;select name="semester" class= "select" id="select"&gt;
                        &lt;option value = ""&gt;Select&lt;/option&gt;
                        &lt;option value="1st"&gt;1st&lt;/option&gt;
                        &lt;option value="2nd"&gt;2nd&lt;/option&gt;
                        &lt;option value="3rd"&gt;3rd&lt;/option&gt;
                        &lt;option value="4th"&gt;4th&lt;/option&gt;
                        &lt;option value="5th"&gt;5th&lt;/option&gt;
                        &lt;option value="6th"&gt;6th&lt;/option&gt;
                        &lt;option value="7th"&gt;7th&lt;/option&gt;
                        &lt;option value="8th"&gt;8th&lt;/option&gt;
                    &lt;/select&gt;
                    &lt;small&gt;&lt;/small&gt;
                &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1263801|text|if+(select+==+"")+{
++++alert("Please+select+a+selection");
++++return+false;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1263802|这对你来说应该是可行的。对我来说就是这样。|unstyled|1263803|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>if (select == "") {
    alert("Please select a selection");
    return false;
</code></pre>

<p>That should work for you. It just did for me.</p>


blocks|key|1478408|text|也许有一种更短的方法，但这对我来说是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478409|<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>|code-block|syntax|javascript|1478410|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Perhaps there is a shorter way but this works for me.</p>

<pre><code>&lt;script language='JavaScript' type='text/javascript'&gt;
    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;
        }
    }
&lt;/script&gt;
&lt;form onSubmit="return validateThisFrom (this);"&gt;
    &lt;select name="FIELDNAME" class="form-control"&gt;
        &lt;option value=""&gt;- select -&lt;/option&gt;
        &lt;option value="value 1"&gt;Visible info of Value 1&lt;/option&gt;
        &lt;option value="value 2"&gt;Visible info of Value 2&lt;/option&gt;
    &lt;/select&gt;
    &lt;select name="FIELDNAME2" class="form-control"&gt;
        &lt;option value=""&gt;- select -&lt;/option&gt;
        &lt;option value="value 1"&gt;Visible info of Value 1&lt;/option&gt;
        &lt;option value="value 2"&gt;Visible info of Value 2&lt;/option&gt;
    &lt;/select&gt;
&lt;/form&gt;
</code></pre>


blocks|key|1478464|text|您希望确保用户选择任何选项，而不是"Choose+an+option“(这是默认选项)。因此，如果您选择第一个选项，它将不会进行验证。如何做到这一点？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1478465|只需在select标记中添加attribute+required+=+"required“即可完成此操作。你可以在下面的代码中看到它|1478466|<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>|code-block|syntax|javascript|1478467|它在我的fine，firefox和internet+explorer上运行得很好。谢谢|1478468|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>you want to make sure that the user selects anything but "Choose an option" (which is the default one). So that it won't validate if you choose the first option. How can this be done?</p>

<p>You can do this by simple adding attribute required = "required" in the select tag. you can see it in below code</p>

<pre><code>&lt;select id="select" required="required"&gt;
&lt;option value=""&gt;Choose an option&lt;/option&gt;
&lt;option value="option1"&gt;Option1&lt;/option&gt;
&lt;option value="option2"&gt;Option2&lt;/option&gt;
&lt;option value="option3"&gt;Option3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>It worked fine for me at chorme, firefox and internet explorer. Thanks </p>


blocks|key|1263695|text|+++<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%25+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//|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1263696|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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

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





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


<p>I'm using the jQuery plugin <a href="http://plugins.jquery.com/project/validate" rel="noreferrer">Validation</a> to validate a form. I have a select list looking like this:</p>

<pre><code>&lt;select id="select"&gt;
&lt;option value=""&gt;Choose an option&lt;/option&gt;
&lt;option value="option1"&gt;Option1&lt;/option&gt;
&lt;option value="option2"&gt;Option2&lt;/option&gt;
&lt;option value="option3"&gt;Option3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Now, I want to make sure that the user selects anything but "Choose an option" (which is the default one). So that it won't validate if you choose the first option. How can this be done?</p>


Validate select box

jQuery

我正在使用jQuery插件来验证表单。我有一个如下所示的选择列表：<select id="select"><option value="">Choose an option</option><option value="option1">Option1</option><option value="option2">Option2</option><option value="option3">O

问验证选择框
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问验证选择框EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问验证选择框
EN