0

こんにちは、jquery validate でいくつかの jquery スターを検証しようとしています。私はこれについてここでいくつかの答えを見つけましたが、両方ともうまくいきませんでした。

ビュー ソースの 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 ビューに novalidate タグがありません。これは jquery.validate.js で生成されています。

これがレールの私のフォームの外観です。

<%= form_for @player, :url => wizard_path do |f| %>

jquery.rating.js で、ダブル 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);
4

1 に答える 1

1

あなたは正しい道を進んでいますが、いくつかの小さな間違いがあります。

まず、同じ ID を持つものが 2 つあり、各星に 1 つと各ラジオに 1 つです。要素ごとに一意の ID を 1 つだけ持つことができます。この状況で呼び出すと何が起こるか$("#player_short_passes_1")は未定義になります (最も可能性が高いのは、その ID を持つ最初に作成された要素を取得することです)。これらのルールを設定するより良い方法はrules、validate 呼び出しにオプションを追加することです。

$(".edit_player").validate({
    ignore:'', // initialize the plugin
    errorElement: 'div',
    rules: {
      'player[short_passes]': {
        required:true
      }
   }
});

ルールはID ではなく、入力の名前で定義されることに注意してください。キーはルール オブジェクトで引用符で囲む必要があることに注意してplayer[short_passes]ください。そうしないと、Javascript でエラーがスローされます。

.edit_playerもう 1 つのことは、それが実際にフォームであることを確認することです。jQuery Validate は、div のようなものではなく、フォームでのみ機能します。

実際の例 (ish - 星のプラグインを取得できなかったので、数字の 1 つをクリックするだけです): http://jsfiddle.net/ryleyb/RghSK/

于 2013-09-24T15:48:11.923 に答える