Home/ Questions/Q 7004705
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:14:00+00:00

I want to add validation on a select statement when someone tries to submit

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0