CODEWITHSUNDEEP
jqueryjquery-validate
Tom
Tom

Reputation: 2634

jquery validation on select with message

I want to add validation on a select statement when someone tries to submit where the select still shows "Please select a timezone":

<form id="timezoneform" action="<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>" method="POST">

    <select name="DropDownTimezone" id="DropDownTimezone" class="required">
      <option selected="" name="timezone_selector" value="" style="font-style:italic">Please select a timezone</option>
      <option value="Pacific/Midway">Pacific/Midway (GMT -11:00)</option>
      ....
      </select>
    <input type="submit" id="changetimezone" name="changetimezone" value="Change timezone" />
</form>

I tried to provide the same validation that I use for text boxes but I guess it's not the same:

<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script type="text/javascript">
var js = jQuery.noConflict();
js("#changetimezone").click(function() {
js("#timezoneform").validate({
    rules: {
        timezone_selector: {
            required: true
        }
    },
    messages: {
        timezone_selector: {
            required: "You must select a timezone"
        }
    }

});
});
</script>
</head>

How can I get a similar message to appear for select statements as validate() does for text boxes. I've seen posts like this but I'm still having no luck. Thanks in advance.

Upvotes: 1

Views: 5014

Answers (2)

Brombomb
Brombomb

Reputation: 7076

you need to require the select list not the option value.

<script type="text/javascript">
var js = jQuery.noConflict();
js("#changetimezone").click(function() {
js("#timezoneform").validate({
    rules: {
        DropDownTimezone: {
            required: true
        }
    },
    messages: {
        DropDownTimezone: {
            required: "You must select a timezone"
        }
    }

});
});
</script>

This works because your value on the timezone_selector is set to an empty string. It will now give you the correct error message. If you need help with placement look into the errorPlacement, errorContainer, and errorElement options found here jQuery Validate Options

Upvotes: 0

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

Your form need a few tweaks:

<form id="timezoneform" action="<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>" method="POST">

    <select name="DropDownTimezone" id="DropDownTimezone">
      <option selected="" name="timezone_selector" value="" style="font-style:italic">Please select a timezone</option>
      <option value="Pacific/Midway">Pacific/Midway (GMT -11:00)</option>
      ....
      </select>
    <input type="submit" id="changetimezone" name="changetimezone" value="Change timezone" />
</form>

Note specifically that:

  • the option element should not have a name attribute, and the validate plugin should not be targeting the option element.

  • You also don't need class='required' on the select if you're going to define the rule in your JavaScript.

  • Finally, you don't need to call validate inside a click handler. You can define it as soon as the form is ready (js(document).ready(function () { ... });).

In summary:

var js = jQuery.noConflict();
js(document).ready(function() {
    js("#timezoneform").validate({
        rules: {
            DropDownTimezone: {
                required: true
            }
        },
        messages: {
            DropDownTimezone: {
                required: "You must select a timezone"
            }
        }

    });
});

Example: http://jsfiddle.net/ALUQB/

Upvotes: 1

Related Questions