required field javascript sees the label for dropdown in php as a selected option

Question

I used a php form and a jquery script so if a customer leaves any field unfilled, they can't proceed. The related field,s code is as follows:

<div class="storagetype">
        <div class="input select">
         <div class="labelfortype"> <label for="storagetype">select your storage type</label></div><!--end of labelfortype class-->
                <select name="storagetype" id="storagetype">
            <option value="">(select)</option>
            <option value="business">business</option>
            <option value="domestic">domestic</option>
            <option value="student">student</option>
            </select>
    </div>
   </div><!--end of storagetype class-->

When nothing is selected, by default (select) option appears. So when (selected) is active a customer hasn't chosen one of the options yet. But still if customer wants to submit the form, the form lets them to do so since it sees (select) as an option with a value. How can I make sure that unless one of "business, domestic or student" options is selected, they can't submit the form? The live example can be found in this Link

The javascript code that I use for "required filll function" is as below:

 function formCheck(formobj){

    var x=document.forms["form1"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");

var fieldRequired = Array("storagetype", "location", "durationnumber", "duration", "txtDate",  "fname", "sname", "email", "number");
    // Enter field description to appear in the dialog box



    var fieldDescription = Array("Type of Storage",  "Post Code", "Duration Number", "Rental Duration Period",  "Rental Start Date", "First Name",  "Surname",  "Email Address", "Telephone Number");

    // dialog message
    var alertMsg = "Please complete all fields and enter a valid email address";

    var l_Msg = alertMsg.length;

    for (var i = 0; i < fieldRequired.length; i++){
        var obj = formobj.elements[fieldRequired[i]];
        if (obj){
            switch(obj.type){
            case "select-one":
                if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            case "select-multiple":
                if (obj.selectedIndex == -1){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;

            case "text":
                case "textarea":
                if (obj.value == "" || obj.value == null || atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
                    alertMsg += "  " + " " + "\n";
                }
                break;

            default:
            }
            if (obj.type == undefined){
                var blnchecked = false;
                for (var j = 0; j < obj.length; j++){
                    if (obj[j].checked){
                        blnchecked = true;
                    }
                }
                if (!blnchecked){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
            }
        }
    }

    if (alertMsg.length == l_Msg){
        return true;
    }else{
        alert(alertMsg);
        return false;
    }
    }
// -->
</script>

This javascript works great for all text fields but only gives the error that I've mentioned for the dropdown options such as storaget type in the example.

Answer 1

change your validation javascript code inside loop

case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].value == ""){ ---- } 
//replace .text with .value

Answer 2

Instead of javascript u can use html required

<select name="storagetype" id="storagetype" required>