CODEWITHSUNDEEP
javascripthtmlvalidation
user2822484
user2822484

Reputation: 13

How do I set validation on select Tag in my web form?

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.

Upvotes: 1

Views: 7270

Answers (3)

Anna Gabrielyan
Anna Gabrielyan

Reputation: 2170

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;
}

Upvotes: 4

Smile
Smile

Reputation: 2758

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

Upvotes: 0

Neikos
Neikos

Reputation: 1980

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;

}

Upvotes: 0

Related Questions