Question

当有人试图提交选项仍显示“请选择时区”时，我想在select语句中添加验证：

<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>

我尝试提供与文本框相同的验证，但我猜它不一样：

<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>

如何为validate()对文本框执行的select语句显示类似的消息。我看过这样的帖子，但我还没有运气。提前谢谢。

Answer 1

您的表单需要进行一些调整：

<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>

特别注意：

option元素不应具有name属性，validate插件不应定位option元素。
如果您要在JavaScript中定义规则，则class='required'上也不需要select。
最后，您无需在validate处理程序中调用click。您可以在表单准备就绪后立即定义它（js(document).ready(function () { ... });）。

总结：

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

    });
});

示例： http://jsfiddle.net/ALUQB/

Answer 2

您需要select列表而不是选项值。

<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>

这是有效的，因为timezone_selector上的值设置为空字符串。它现在将为您提供正确的错误消息。如果您需要有关展示位置的帮助，请查看此处jQuery Validate Options

中的errorPlacement，errorContainer和errorElement选项

选择消息的jquery验证

2 个答案: