jquery 对带有消息的选择进行验证

发布于 2024-12-24 02:54:36 字数 1473 浏览 1 评论 0原文

当有人尝试提交时，选择仍然显示“请选择时区”，我想在 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 语句中。我看过这样的帖子，但我仍然没有运气。提前致谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

じ违心 2024-12-31 02:54:36

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

<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 元素。
也不需要在 select 上使用 class='required'。
最后，您不需要在 click 处理程序中调用 validate。您可以在表单准备好后立即定义它 (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/

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

慵挽 2024-12-31 02:54:36

您需要需要 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 上的值设置为空字符串。现在它会给您正确的错误消息。如果您需要有关放置的帮助，请查看此处的 errorPlacement、errorContainer 和 errorElement 选项 jQuery 验证选项

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

回复收藏 0 原文

~没有更多了~