Issues Questions Drop down has no red border.

4612 asked on

I have no coding experience and would like ask this: How do you modify the script so that the drop down also has a red border if no selection has been made?

  • 1I have updated the article, just download the new example file.
Add Answer
All HTML codes will be stripped in the comment, except inline <code> HTML tag.
1 Answer
1 answered on

Add select option with an empty value in your HTML form :

&lt;select name="subject" class="select-field" required="true"&gt; &lt;!--add required attribute--&gt;
&lt;option value=""&gt;---- Select one ----&lt;/option&gt;&lt;!-- add this option--&gt;
&lt;option value="General Question"&gt;General Question&lt;/option&gt;
 &lt;option value="Advertise"&gt;Advertisement&lt;/option&gt;
 &lt;option value="Partnership"&gt;Partnership Oppertunity&lt;/option&gt;
&lt;/select&gt;

In jquery section find validation code around line 14, and add #contact_form select[required=true], so that validator checks for empty value and adds red border . Final code looks like this :

//simple validation at client's end
$("#contact_form input[required=true], #contact_form textarea[required=true], #contact_form select[required=true]").each(function(){
$(this).css('border-color',''); 
if(!$.trim($(this).val())){ //if this field is empty 
    $(this).css('border-color','red'); //change border color to red   
    proceed = false; //set do not proceed flag
}

Hope it helps.

    All HTML codes will be stripped in the comment, except inline <code> HTML tag.

    Can You Answer this? Help us answer the question!

      • Answer
      Supports basic Markdown syntax. Excluded syntaxes (Headers, Lists, Blockquotes, Table, Images)