如何使下拉列表生效

Question

I created the following form and validation: http://jsfiddle.net/baumdexterous/NNHU2/

All the items that I want to validate work fine but I'm not sure how to validate the state dropdown field.

How can I make the state field required too and get the red box to appear around the state if it is left blank?

HTML

<label>State<br>
  <select name="State">
    <option value="" selected="selected">Select a State/ Province</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
  </select>
</label>

JavaScript

function validateForm(thisform) {
    if (thisform.f_name.value == "" || thisform.email.value == "" || thisform.l_name.value == "" || thisform.State.value == "" || !thisform.officialrules.checked) {
        return false;
    }
}

$(function () {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        $("#prod").text("true");
        mob = true;

        zoom = $(window).width() / 810;

        $("#main").css('zoom', zoom);

        $(window).resize(function () {
            zoom = $(window).width() / 810;
            $("#main").css('zoom', zoom);
        });
    }

    $(".enter").click(function (event) {
        personal_data = true;

        for (var i = 0; i < $("input[placeholder]").length; i++) {
            if ($("input[placeholder]").not("#checkbox2").eq(i).val() == "") {
                $("input[placeholder]").eq(i).addClass('active_placeholder').focus();
                $("#drawer").html($("input[placeholder]").eq(i).attr("placeholder"));
                personal_data = false;
                correct_pd();
                return false;
            }
        }

        if (!$("#checkbox2").parent().hasClass("active")) {
            $("#checkbox2").parent().next().css
            $("#check_box > p").eq(1).addClass('active');
            $("#checkbox2").parent().addClass('bg_red');
            setTimeout(function () {
                $("#checkbox2").parent().removeClass('bg_red');
            }, 500);
            $("#drawer").html($("#checkbox2").attr("placeholder"));
            personal_data = false;
            correct_pd();
        }
    });

    function correct_pd() {
        if (!personal_data) {
            if ($("#drawer").css("margin-top") == "-60px") {
                $("#drawer").stop(true, true).css("margin-top", 0).animate({
                    opacity: 1
                }, 250, function () {
                    setTimeout(function () {
                        $("#drawer").css("margin-top", -60);
                    }, 1500)
                })
            }
        }
    }

    $("input[type='checkbox']").change(function (event) {
        if ($(this).is(":checked")) {
            $(this).parent().addClass('active');
            $("#check_box > p").eq(1).removeClass('active');
        } else {
            $(this).parent().removeClass('active');
        }
    }).change();
});

Answer 1

add this if condition:

if($('select[name="State"]').find('option:first-child').is(':selected')){
    $('select[name="State"]').addClass('active_placeholder').focus();
    return false;
}

Answer 2

Try something like this:

$(document).ready(function(e){

    $('#btn').click(function(){

        if($('#state').val() == ""){
            alert("error");
            $('#state').css("border", "2px solid red"); 
        } 
        else alert($('#state').val());
    })
});

Off course, you'll need to add an id to your select statement first

Answer 3

if this is html5 it could be just enough to add the required attribute to the different items that are "required", without having to run the custom content

see jsfiddle: http://jsfiddle.net/Icepickle/4ke2g/

<select required="required" id="State" name="State">
    <option value="" selected="selected">Select a State/ Province</option>
    <option value="AL">Alabama</option>
</select>

i just replaced the css a bit, so you could see it's a functionality in html5