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.

score 1 · Accepted Answer · answered Aug 11 '14 at 19:59

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 '14 at 19:59

Hackerman

12,139
2
34
45

thanks.. exactly what i needed. I'll be marking this as my ans :) – Sean Aslam Aug 11 '14 at 20:03
1

Beat me to it :) you can find it with this also : $("select[name='cards'").find('option:selected').text(); From this answer : http://stackoverflow.com/questions/4641962/getting-an-option-text-value-with-javascript – Ben Lefebvre Aug 11 '14 at 20:03
@user2912702, i'm glad to help...let me know if you need a Jquery based version too...cheers ;) – Hackerman Aug 11 '14 at 20:05

score 0 · Answer 2 · answered Aug 11 '14 at 20:04

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.

score 0 · Answer 3 · answered Aug 11 '14 at 20:07

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 {

        } 
   } 
}

Select Drop down Form Validation (Display text)

3 Answers3

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