How to validate "Select" tag in HTML using JavaScript

Question

<form action="#" class="group" method="post" onsubmit="return checkforblank()">
    <legend><span class="number">1</span>Departing & Arriving</legend>
    <fielset class="col-sm-6">
        <label for="FDestination">From</label>
        <select name="Location" id="Location">
            <option value="Please Select">Please Select</option>
            <option value="Newport">Newport</option>
            <option value="Mahdi">Mahdi</option>
            <option value="Cardiff">Cardiff</option>
            <option value="Cilo">Cilo is</option>
        </select>
    </fieldset>
</form>

<script>
    function checkforblank(){
        if (document.getElementsByID('Location').value== "Please Select") {
            alert('Please enter first name');
            document.getElementById('Location').style.borderColor = "red"; 
            return false; 
        }
    }
</script>

How can I display error when user chooses "Please Select" option from fieldset?

There is a typo in your post. document.getElementsByID('Location').value should be document.getElementById('Location').value — Payson
– Payson, Commented Nov 6, 2015 at 21:40
@Payson I'd suggest posting this as the answer. Also, try to take a look into using dev tools in whichever browser you are using to test the code. This would be a great asset in saving time and frustration in the future :) — Luke G
– Luke G, Commented Nov 6, 2015 at 21:45

dfsq · Accepted Answer · 2015-11-06 21:44:06Z

4

How can I display error when user chooses "Please Select" option from fieldset?

You are already validating form submit, now you only need to add the same validation function for select onchange:

function checkforblank() {
    
    var location = document.getElementById('Location');
    var invalid = location.value == "Please Select";
 
    if (invalid) {
        alert('Please enter first name');
        location.className = 'error';
    }
    else {
        location.className = '';
    }
    
    return !invalid;
}

.error {border: 1px red solid;}

<form action="#" class="group" method="post" onsubmit="return checkforblank()">
    <legend><span class="number">1</span>Departing & Arriving</legend>
    <fielset class="col-sm-6">
        <label for="FDestination">From</label>
        <select name="Location" id="Location" onchange="checkforblank()">
            <option value="Please Select">Please Select</option>
            <option value="Newport">Newport</option>
            <option value="Mahdi">Mahdi</option>
            <option value="Cardiff">Cardiff</option>
            <option value="Cilo">Cilo is</option>
        </select>
    </fieldset>
    <button>Save</button>
</form>

_{You will not see alert in demo, as it's not allowed in snippet sandboxed iframe :(}

answered Nov 6, 2015 at 21:44

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

el mashrafi Over a year ago

Thankyou very much! , say if I had another select option with exact same options and value also ID's how can i make the data validate there aswell? should I just create a process for that part again or is there a shorter way for me to use exact same validation without having to write another process again.

Bram Vanroy · Accepted Answer · 2015-11-06 22:20:13Z

3

Why not use the required keyword? Requires HTML5, but doesn't need to rely on JS. For additional info, see the documentation.

:required:focus {
  box-shadow: 0  0 6px rgba(255,0,0,0.5);
  border: 1px red solid;
  outline: 0;
}

<form action="#" class="group" method="post" onsubmit="return checkforblank()">
  <legend><span class="number">1</span>Departing & Arriving</legend>
  <fielset class="col-sm-6">
    <label for="FDestination">From</label>
    <select name="Location" id="Location" required>
      <option value="">Please select</option>
      <option value="Newport">Newport</option>
      <option value="Mahdi">Mahdi</option>
      <option value="Cardiff">Cardiff</option>
      <option value="Cilo">Cilo is</option>
    </select>
    </fieldset>
    <input type="submit" value="Submit">
</form>

After noticing that this wasn't working well on all browsers, or on all inputs I made a fiddle with many input types (but not all HTML5 ones are included). This way, you can check if the required attribute is working in the browsers that you need. At this time, a JS might indeed be your best bet to be completely cross-browser safe.

edited Nov 6, 2015 at 22:20

answered Nov 6, 2015 at 22:04

Bram Vanroy

28.8k29 gold badges151 silver badges266 bronze badges

1 Comment

Boz Over a year ago

You can also add disabled and hidden keywords to make the "Please select" option unclickable. <option selected disabled hidden value="">Please select</option>

user2624242 · Accepted Answer · 2015-11-06 22:20:41Z

1

function validateForm() {    
  if (document.getElementById('Location').value== "Please Select")
  {
      alert('Please enter first name');
      document.getElementById('Location').style.borderColor = "red"; 
      return false; 
  }    
}

<form name="myForm" action="#"
onsubmit="return validateForm()" method="post">
<select name="Location" id = "Location" >
  <option value = "Please Select" >Please Select </option>
  <option value="Newport">Newport</option>
  <option value="Mahdi">Mahdi</option>
  <option value="Cardiff">Cardiff</option>
  <option value="Cilo">Cilo is </option>
</select>
<input type="submit" value="Click">
</form>

answered Nov 6, 2015 at 22:20

user2624242

3582 silver badges12 bronze badges

Comments

Omar Khorshid · Accepted Answer · 2023-02-28 22:49:49Z

0

This is a pure HTML solution:

make your select tag required, make your first option selected, disabled, and add the value attribute and leave it empty: (value=""), if they don't choose anything, it throws a frontend validation error asking them to change the value since it is empty.

        <select required name="Location" id="Location">
            <option disabled selected value="">Please Select</option>
            <option value="Newport">Newport</option>
            <option value="Mahdi">Mahdi</option>
            <option value="Cardiff">Cardiff</option>
            <option value="Cilo">Cilo is</option>
        </select>

edited Feb 28, 2023 at 22:49

answered Feb 28, 2023 at 22:49

Omar Khorshid

11 bronze badge

Collectives™ on Stack Overflow

How to validate "Select" tag in HTML using JavaScript

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related