Select Drop down Form Validation (Display text)

Question

I am trying to validate a form.

What I am trying to do is validate the form by validating the Option display text not the option value, since the option values are int

Example:

<option value="selectcard">Please select</option>

If user clicks submit the form should validate if the option display says Please Select regardless of what the option value is.

Code which is not working

function fun(){
    $('#cardtype').change(function () {
        var sel = $('option:selected', this).text();
        if (sel == "Please select") {
            $('.showotherpDescription').show();
        } else {

        } 
    }); 
}

Not working: http://jsfiddle.net/f5hxpo7g/2/

Also including the regular working example for validating the form based on option value

Validates Based on option value http://jsfiddle.net/f5hxpo7g/1/

Please let me know what i am doing wrong.

Thanks in advance.

Hackerman · Accepted Answer · 2014-08-11 19:59:12Z

1

Your function should be like this:

function fun()
{
  var ddl = document.getElementById("cardtype");
  var valor = ddl.options[ddl.selectedIndex].text;
  if (valor == "--- Please select ---")
  {
    alert("Please select a card type");
  }
}

Working fiddle:http://jsfiddle.net/robertrozas/XFtBD/169/

answered Aug 11, 2014 at 19:59

Hackerman

12.3k2 gold badges37 silver badges47 bronze badges

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

3 Comments

Sean Aslam Over a year ago

thanks.. exactly what i needed. I'll be marking this as my ans :)

Ben Lefebvre Over a year ago

Beat me to it :) you can find it with this also : $("select[name='cards'").find('option:selected').text(); From this answer : stackoverflow.com/questions/4641962/…

Hackerman Over a year ago

@user2912702, i'm glad to help...let me know if you need a Jquery based version too...cheers ;)

pid · Accepted Answer · 2014-08-11 20:04:18Z

0

I fixed it, you should use this JS:

$(function () {
    $('#subbutton').click(function () {
        if ($('#cardtype option:selected').text() === "Please select")
        {
            alert("PLEASE SELECT");
        }
    });
});

And remove onclick="..." from the button, you don't need it. Also add id="subbutton.

Here's the working JSFiddle.

answered Aug 11, 2014 at 20:04

pid

11.6k6 gold badges37 silver badges67 bronze badges

Comments

M.K.S. · Accepted Answer · 2014-08-11 20:07:53Z

I checked out the jsfiddle you referenced and modified it slightly to make it work, you can see it here.

The issue with the code you provided is, IMO:

An issue with the purpose of your function (validation) and the event you're subscribing the code to (the combo selection changed event)
The way you're obtaining the text from the currently selected option, you should create the selector based on the element that contains the options, otherwise, if you have more than 1 combo in your page, you will get lots of values (one for each selected option).

Check out the code in the jsfiddle i provided and let me know if you need more information.

For reference, here is the code i used:

HTML:

<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select>

<input type="button" onclick="fun()" value="click here">

JS:

function fun(){
    var cmb = document.getElementById('cardtype');
    var sel = cmb.options[cmb.selectedIndex].text;
        if (sel == "--- Please select ---") {
            alert('Please select a different option');
            //$('.showotherpDescription').show();
        } else {

        } 
   } 
}

Collectives™ on Stack Overflow

Select Drop down Form Validation (Display text)

3 Answers 3

Working fiddle:http://jsfiddle.net/robertrozas/XFtBD/169/

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Working fiddle:http://jsfiddle.net/robertrozas/XFtBD/169/

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related