jquery raty require rating

Question

I'm trying to figure out how to get the jquery Raty plugin required. Does anyone one know of an easy way just to make sure the user has clicked a star. if anyone need to see anyone part of code please ask me. I'm not to great with jquery yet so please be detailed and thank you.

    $rates.raty({
        half: false,
        target : '#add_post_rating',
        hints: pixreviews.hints,
        path: path,
        targetKeep : true,
        //targetType : 'score',
        targetType : 'hint',
        //precision  : true,
        score: default_rating,
        scoreName: 'pixrating',
        click: function(rating, evt) {

            $('#add_post_rating' ).val( '' + rating );
            $('#add_post_rating option[value="' + rating + '"]' ).attr(  'selected', 'selected' );

        },
        starType : 'i'
    });

this seams to be the way to go `$('div').raty('score');` from [jQuery Raty - Functions](https://github.com/wbotelhos/raty#functions) — DIEGO CARRASCAL, Aug 24 '16 at 18:10
_"Does anyone one know of an easy way just to make sure the user has clicked a star"_... so, depending on where you need to check this... or what event "trigger your question" for example onclick, beforeClose. — DIEGO CARRASCAL, Aug 24 '16 at 18:22
i need to require the user to give a rating before allowing them to submit, and through an error if no rating is given. — jakecolor, Aug 24 '16 at 18:33

gaetanoM · Answer 1 · 2016-08-24T19:07:01.297

Because you defined:

scoreName: 'pixrating'

Raty will create an input type hidden field inside the div. You need to consider this field.

My example and fiddle:

$(function () {
  $('div').raty({
    half: false,
    hints: ['bad', 'poor', 'regular', 'good', 'gorgeous'],
    path: 'https://raw.githubusercontent.com/wbotelhos/raty/master/lib/images/',
    targetKeep: true,
    //targetType : 'score',
    targetType: 'hint',
    //precision  : true,
    score: 0,
    scoreName: 'pixrating',
    click: function (rating, evt) {
      $('#add_post_rating').val(rating);
    },
    starType: 'i'
  });

  // handle the select box changes
  $('#add_post_rating').on('change', function (e) {
    $('div input[name="pixrating"]').val(this.value);
    $('div').raty('score', this.value);
  }).trigger('change');

  // on form submit do your test....
  $('#frm').on('submit', function(e) {
    if ($('div').raty('score') == '0') {
      e.preventDefault();
      console.log('error: raty is 0!');
      return;
    }
  })
});

<link rel="stylesheet" href="https://rawgit.com/wbotelhos/raty/master/lib/jquery.raty.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://rawgit.com/wbotelhos/raty/master/lib/jquery.raty.js"></script>

<form id="frm">
    <div></div>
    <select id="add_post_rating">
        <option value="0"></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <input type="submit" value="Submit">
</form>

jquery raty require rating

1 Answers1