How to force user to select value from dropdown and change focus

Question

I want user to select value from dropdown explicitly. In case he/she doesn't select value but try to submit the form it should show error message and most importantly shift focus to dropdown. Here is my dropdown list.

<select name="mydropdown" id="drpdwn">
    <option value="default" disabled selected="selected">Select From List</option>
    <option value="Legal">Legal</option>
    <option value="Pharma">Pharma</option>
    <option value="Real Estate">Real Estate</option>
    <option value="Other">Other</option>
</select>

I tried to retrieve value using jQuery using below code however its not working.

form.submit(function () {
    var drpval = $('#drpdwn option:selected').val()
    if (drpval == 'default') {
        $("#drpdwn").focus();
    }
});;

I am pretty new to jQuery so kindly excuse if I have done it totally wrong. Can you suggest what would be correct way to achieve result to make user 1. Select from dropdown 2. Set focus in case he /she doesn't

Here is jsfiddle : http://jsfiddle.net/techdatavi/f7Jj4/

Answer 1

Can't you just use 'required'?

<select name="mydropdown" id="drpdwn" required>
    <option value="default" disabled selected="selected" >Select From List </option>
    <option value="Legal">Legal</option>
    <option value="Pharma">Pharma</option>
    <option value="Real Estate">Real Estate</option>
    <option value="Other">Other </option>
</select>

EDIT: if 'required' doesn't work look at this example - http://jsfiddle.net/f7Jj4/1/

$('#drpdwn').blur(function() {
    var drpval = $('#drpdwn option:selected').val();
    console.log(drpval);
});

Because the default is 'disabled' it will not log anything on blur, it only logs on blur after a change has been made. Because no value is there you'll have to test for the value of the select to make the change for focus. That is why 'required' is valuable, because you may never blur the drop-down.

EDIT: Here is a fiddle demonstrating the return of focus - http://jsfiddle.net/f7Jj4/2/

$('#drpdwn').blur(function() {
    var drpval = $('#drpdwn option:selected').val();
    console.log(drpval);
    //console.log( $('#drpdwn').val() );
    if('default' == drpval) {
        $('#drpdwn').focus().css('border', '1px solid red');
    }
});

Answer 2

Have you tried to use '.value' instead of '.val()'? I don't exactly know if .val() can be used on option tags or just on text input elements.. Have you checked the console for errors?

Answer 3

Ok so, I imagine your html goes inside a form tag, and that this form has a submit button, something like this:

<form id="myform">
    <select name="mydropdown" id="drpdwn">
        <option value="default" selected="selected">Select From List</option>
        <option value="Legal">Legal</option>
        <option value="Pharma">Pharma</option>
        <option value="Real Estate">Real Estate</option>
        <option value="Other">Other</option>
    </select>
    <button id="mybutton">Submit</button>
</form>

Using some jQuery I could do what you wanted.

$(document).ready(function () {

    $('#mybutton').click(function (e) {
        e.preventDefault();
        if ($('#drpdwn').val() == 'default') {
            $("#drpdwn").focus();
        } else {
            $('#myform').submit();
        }
    });
});

This is the solution for your exact problem BUT if you have other fields you want to check before submitting I strongly reccomend using the jqueryvalidation.org plugin, really nice and easy to use.

jsFiddle working example of my code LINK

Answer 4

try this

html

<form id="myform">
    <select name="mydropdown" id="drpdwn" >
        <option value="default" disabled selected="selected" >Select From List </option>
        <option value="Legal">Legal</option>
        <option value="Pharma">Pharma</option>
        <option value="Real Estate">Real Estate</option>
        <option value="Other">Other </option>
    </select>
    <input type="button" id="mybutton" value="submit">
</form>

javascript

$('#mybutton').click(function () {
    if ($('#drpdwn option:selected').val() == 'default') 
    {
       //error message here...
       $("#drpdwn").focus();
    }else{
       $('#myform').submit(); // do the submit
    }
});

Answer 5

jqueryvalidation.org is your friend.

here is the code:

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script>
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
var myRules = {
        your_drop_down: {
        required: true
        }
    };

$( "#myform" ).validate({
  rules: myRules
});
</script>

more examples can be found at: http://jqueryvalidation.org/documentation/