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


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 >
    <div >
     <div > <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>
  </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){
            case "select-one":
                if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
                    alertMsg += " - " + fieldDescription[i] + "\n";
            case "select-multiple":
                if (obj.selectedIndex == -1){
                    alertMsg += " - " + fieldDescription[i] + "\n";

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

            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;
        return false;
// -->

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.




change your validation javascript code inside loop

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



Instead of javascript u can use html required

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

People are also looking for solutions to the problem: html - PHP getting document path relative to site root


Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.