I want to set validation on select tag in my form so that the user cannot proceed without choosing a location.

Below is the form...

<form name="form1">
    Pickup Suburb: 
    <select id="pick" class="pick" name="pick"/><br />
        <option value="none">-- Please select a location --</option>
        <option value = 1>City </option>
        <option value = 2>Airport </option>
        <option value = 3>Abbotsbury </option>
        <option value = 4>Abbotsford </option>
        <option value = 5>Acacia Gardens </option>
        <option value = 6>Agnes Banks </option>
        <option value = 7>Airds </option>
        <option value = 8>Akuna Bay </option>
    </select>

    <br />Rear facing baby seat 
    <select class="rfbs" name="rfbs" style="width:50px">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select><br />

    <br />Booster seat 
    <select class="bs" name="bs" style="width:50px">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

    <br />    
    <br />Luggage Trailer 
    <select class="lt" name="lt" style="width:50px">
        <option value="0">0</option>
        <option value="1">1</option>
    </select>

    <br />
    <br /><input class="show-popup" type="submit" value="Get Quote">
</form>

I have applied a JavaScriptpopup window to show the results when user fills the form so is it possible to apply validation that shows an error message if the user tries to submit the form without choosing a location.

Any help would be highly appreciated.

I want to set validation on select tag in my form so that the user cannot proceed without choosing a location.

Below is the form...

<form name="form1">
    Pickup Suburb: 
    <select id="pick" class="pick" name="pick"/><br />
        <option value="none">-- Please select a location --</option>
        <option value = 1>City </option>
        <option value = 2>Airport </option>
        <option value = 3>Abbotsbury </option>
        <option value = 4>Abbotsford </option>
        <option value = 5>Acacia Gardens </option>
        <option value = 6>Agnes Banks </option>
        <option value = 7>Airds </option>
        <option value = 8>Akuna Bay </option>
    </select>

    <br />Rear facing baby seat 
    <select class="rfbs" name="rfbs" style="width:50px">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select><br />

    <br />Booster seat 
    <select class="bs" name="bs" style="width:50px">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>

    <br />    
    <br />Luggage Trailer 
    <select class="lt" name="lt" style="width:50px">
        <option value="0">0</option>
        <option value="1">1</option>
    </select>

    <br />
    <br /><input class="show-popup" type="submit" value="Get Quote">
</form>

I have applied a JavaScriptpopup window to show the results when user fills the form so is it possible to apply validation that shows an error message if the user tries to submit the form without choosing a location.

Any help would be highly appreciated.

• javascript
• html
• validation

Share Improve this question Follow edited Jun 15, 2017 at 7:10 Mantas Čekanauskas 2,23866 gold badges2626 silver badges4848 bronze badges asked Sep 30, 2013 at 11:02 user2822484user2822484 1322 silver badges55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Because select field has always been chosen value (default first option), you can just check:

if($('#pick').val()=='none') {    
  alert('choose some value');
  return false;
}

The form element allows a onSubmit tag that will get called if the user tries to submit the form.

You could try something like this:

<form onsubmit="checkFormValidity()">
<select id="location" ... >

Then in your javascript you can then do something like this:

function checkFormValidity(){

  var select = document.getElementById("location");
  if(select.options.selectIndex == 0)
  { 
    return false; 
  }
  return true;

}

One line I would like to add to make sure that form will not be submitted

if($('#pick').val()=='none'){
    alert('choose some value');
    return false;  // this is a missing line
}

Note: To use jQuery, you need to download it and add it to your web form

Edit:

<form id="form1" name="form1" method="post">
Pickup Suburb: 
    ....
</select>
<br /><input class="show-popup" type="submit" value="Get Quote">
</form>

JavaScript

$( "#form1").submit(function( event ) {
    if($('#pick').val()=='none'){
        event.preventDefault(); //will prevent default form submission
        alert("Please select one of the options provided");
        return false;
    }
});

You can check Demo on jsfiddle