How do I put validation on selectbox?

Question

1.00/5 (1 vote)

See more:

This is my selectbox

<select id="DropDownSeverity" class="dropbtn"> <!-- severity and urgency hard coded for now -->
                		<option disabled="disabled" selected="selected">Severity ▼</option>
                    	<option value="Extreme">Extreme</option>
                		<option value="Minor">Minor</option>
                		<option value="Moderate">Moderate</option>
                		<option value="Severe">Severe</option>
                    	<option value="Unknown">Unknown</option>
                	</select>

This is my button or submit button

<td style="align:centre;height:30px; width:100px; background-color:  #148f77;"><input type="button" onclick="CreateAlert();" value="Create" id="CreatUpdateAlertButton"/></td>

What I have tried:

<select required id="DropDownSeverity" class="dropbtn"> <!-- severity and urgency hard coded for now -->
                		<option disabled="disabled" selected="selected">Severity ▼</option>
                    	<option value="Extreme">Extreme</option>
                		<option value="Minor">Minor</option>
                		<option value="Moderate">Moderate</option>
                		<option value="Severe">Severe</option>
                    	<option value="Unknown">Unknown</option>
                	</select>

tried required and js too to show alert if value is null but didn't worked for me. Please Help

Posted 2-Aug-17 23:29pm

Member 13233111

Updated 3-Aug-17 0:12am

Add a Solution

Comments

Thomas Daniels 3-Aug-17 5:31am

What do you want to validate?

Member 13233111 3-Aug-17 5:34am

if no value is selected. On button click user should get alert. It would be better if you suggest me solution without js

Richard Deeming 3-Aug-17 10:29am

The required attribute works perfectly well for me: demo[^]

If you don't select an option, then try to submit the form, you won't be able to submit it, and the browser will display an error popup.

2 solutions

Solution 3

with Jquery:

function CreateAlert(){
   if($("#DropDownSeverity option:selected").value()==null){
      //alert your message here
   }
}

Posted 3-Aug-17 0:12am

Zahid Mughal

Comments

Member 13233111 3-Aug-17 6:14am

I have Three select boxes as you can see in solution 2 what i Tried

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Daniels · Accepted Answer · 2017-08-02T23:39:00

Solution 1

In your comment, you ask for a solution without JavaScript, but that's not possible. So here's a solution that does use JavaScript.

Set the "value" attribute on your first "option" to "none":

HTML

<option disabled="disabled" selected="selected" value="none">Severity ▼</option>

In your validation code, check that the selected value is not equal to "none":

JavaScript

if (document.getElementById("DropDownSeverity").value === "none") {
    alert("Please select a severity.");
    return; // 'exit' the running function; remove this line if you don't want that
}

Note that people can use your browser developer tools to change the value of the element to something else to circumvent the validation. If you send this value to a server, make sure to validate it on the server-side as well. If your application is purely client-side, no need to worry about it.

Posted 2-Aug-17 23:39pm

Thomas Daniels

Updated 2-Aug-17 23:40pm

v2

Comments

Member 13233111 3-Aug-17 5:44am

Thanks for the suggestion bro... but I want to apply this on button.

Member 13233111 3-Aug-17 5:48am

as per your suggestion as the page loads the alert shows. That's why on button click.

Thomas Daniels 3-Aug-17 5:51am

I said "In your validation code ...". You have to put my piece of code inside the function of your button click.

Member 13233111 3-Aug-17 5:54am

Thank you very much bro... It worked perfectly

Member 13233111 3-Aug-17 6:02am

I have Three Selectbox with same function call... How to merge all three?

Thomas Daniels 3-Aug-17 6:05am

Just do the same for all select boxes: set a "value" attribute for the default value and use the 'if' block that I shared, but change the argument of getElementById for each different select box.

Member 13233111 3-Aug-17 6:08am

I did so, But it is only showing me for 1st one severity see solution 2

Thomas Daniels 3-Aug-17 6:19am

Well, that's because the 'return' statement exits the function if the severity dropdown has no value. The second alert will show up if 'severity' DOES have a value.

Member 13233111 3-Aug-17 6:29am

Thanks again bro... you are the best!!!