Question

我创建了以下表单并进行了验证： http://jsfiddle.net/baumdexterous/NNHU2/

我要验证的所有项目都运行正常，但我不确定如何验证状态下拉字段。

如何将状态字段设为必填项，如果空白则让红色框出现在状态周围？

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

添加以下条件：

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

Answer 2

尝试这样的事情：

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

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

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

当然，您需要先在您的选择语句中添加一个ID

Answer 3

如果这是html5，它可能足以将所需属性添加到“必需”的不同项目，而无需运行自定义内容

请参阅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>

我刚刚更换了css，所以你可以看到它是html5中的一个功能

如何进行下拉验证

3 个答案: