[英]Validating jquery rating stars
嗨,我尝试用jquery validate验证一些jquery star。 我在这里找到了一些答案,但都没有运气尝试过。
这是视图源中的HTML原因
但它不起作用,我如何验证星级,以使其成为必填项,XD! 谢谢..我已经研究了好几天了,请帮助-
正如我说的,我已经尝试了其他问题的答案,但它们对我没有用
<div id="pasescortos">
<label for="attribute">Short passes</label>
<span class="star-rating-control">
<div class="rating-cancel"><a title="Cancel Rating"></a></div>
<div class="star-rating rater-0 star star-rating-applied star-rating-live" id="player_short_passes_1">
<a title="1">1</a></div><div class="star-rating rater-0 star star-rating-applied star-rating-live" id="player_short_passes_2">
<a title="2">2</a></div><div class="star-rating rater-0 star star-rating-applied star-rating-live" id="player_short_passes_3">
<a title="3">3</a></div><div class="star-rating rater-0 star star-rating-applied star-rating-live" id="player_short_passes_4">
<a title="4">4</a></div><div class="star-rating rater-0 star star-rating-applied star-rating-live" id="player_short_passes_5">
<a title="5">5</a></div></span>
<input class="star star-rating-applied" id="player_short_passes_1" name="player[short_passes]" type="radio" value="1" style="display: none;">
<input class="star star-rating-applied" id="player_short_passes_2" name="player[short_passes]" type="radio" value="2" style="display: none;">
<input class="star star-rating-applied" id="player_short_passes_3" name="player[short_passes]" type="radio" value="3" style="display: none;">
<input class="star star-rating-applied" id="player_short_passes_4" name="player[short_passes]" type="radio" value="4" style="display: none;">
<input class="star star-rating-applied" id="player_short_passes_5" name="player[short_passes]" type="radio" value="5" style="display: none;">
</div>
这是JS。
$().ready(function() {
// validate signup form on keyup and submit
$(".edit_player").validate({
ignore:'', // initialize the plugin
errorElement: 'div'});
$("#player_position").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_short_passes_1").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
$("#player_dominant_leg").rules("add", { required: true, messages: { required: "<%= t('generales.camporequerido') %>"}});
});
jQuery.extend(jQuery.validator.messages, {
required: "<%= t('generales.camporequerido') %>",
remote: "Please fix this field.",
email: "Ingresa un correo electrónico válido.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
minlength: jQuery.validator.format("Please enter at least {0} characters."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
编辑1:
我在HTML查看源中注意到,我的表单具有此novalidate =“”
<form accept-charset="UTF-8" action="/player_steps/skills?locale=en" class="edit_player" id="edit_player_17" method="post" novalidate="novalidate">
奇怪的是,我在Rails视图中没有novalidate标签,它是在jquery.validate.js中生成的,对吗?
这就是我在rails中的外观。
<%= form_for @player, :url => wizard_path do |f| %>
在jquery.rating.js中,我发现这个问题:如何解决该问题?
// insert rating star
var star = $('<div class="star-rating rater-'+ control.serial +'"><a title="' + (this.title || this.value) + '">' + this.value + '</a></div>');
rater.append(star);
// inherit attributes from input element
if(this.id) star.attr('id', this.id);
if(this.className) star.addClass(this.className);
您走在正确的道路上,但是您有一些小错误。
首先,您有两件具有相同ID的物品-每颗星星一件,每台收音机一件。 每个元素只能有一个唯一的ID。 这样,在这种情况下调用$("#player_short_passes_1")
时会发生未定义的情况(很可能是您获得了第一个创建的具有该ID的元素)。 设置这些规则的一种更好的方法是在您的验证调用中添加rules
选项:
$(".edit_player").validate({
ignore:'', // initialize the plugin
errorElement: 'div',
rules: {
'player[short_passes]': {
required:true
}
}
});
请记住,规则是由输入的名称而不是ID定义的。 请注意,必须在规则对象中引用player[short_passes]
键,否则Javascript将引发错误。
另一件事就是确保.edit_player
实际上是一种形式。 jQuery Validate仅适用于表单,不适用于div。
工作示例(ish-我没有获得star插件,因此您只需单击数字之一): http : //jsfiddle.net/ryleyb/RghSK/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.