[英]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.