Привет, я пытаюсь проверить некоторые jquery-звезды с помощью jquery validate. Я нашел пару ответов здесь об этом, но попробовал оба без везения.
Вот HTML-код источника, вызывающий im на рельсах
Но он не работает, Как я могу проверить рейтинг звезд, чтобы сделать их обязательными, XD! спасибо..и изучали это в течение нескольких дней, PLS help-
И, как я сказал, я попробовал ответы на другие вопросы, но они не работают для меня
<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}.")
});
EDIT1:
Я заметил в источнике просмотра 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, который был сгенерирован в jquery.validate.js правильно?
так выглядит моя форма в рельсах.
<%= form_for @player, :url => wizard_path do |f| %>
В jquery.rating.js о проблеме doble id я нашел это.. как я могу это исправить?
// 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);
Вы на правильном пути, но у вас есть несколько мелких ошибок.
Во-первых, у вас есть две вещи с одинаковым идентификатором - по одному для каждой звезды и по одному для каждого радио. У вас может быть только один уникальный идентификатор для каждого элемента. Что происходит, когда вы вызываете $("#player_short_passes_1")
в этой ситуации, тогда становится неопределенным (скорее всего, вы получаете первый созданный элемент с этим ID). Лучшим способом установки этих правил было бы просто добавить параметр rules
для вашего подтверждения:
$(".edit_player").validate({
ignore:'', // initialize the plugin
errorElement: 'div',
rules: {
'player[short_passes]': {
required:true
}
}
});
Помните, что правила определяются по имени ввода, а не по идентификатору. Обратите внимание, что ключ player[short_passes]
должен быть указан в объекте правил, иначе Javascript player[short_passes]
ошибку.
Еще одна вещь - просто убедиться, что .edit_player
на самом деле является формой. jQuery Validate работает только с формами, а не с div.
Рабочий пример (ish - я не получил плагин "звезда", поэтому вам просто нужно щелкнуть по одному из чисел): http://jsfiddle.net/ryleyb/RghSK/