Проверка JavaScript на скрытом поле не работает в MVC

Question

Я пытаюсь проверить скрытый файл в MVC, используя JavaScript. Я создаю обратную связь по рейтингу в виде звезды. Я хочу, чтобы проверка не прошла, если пользователь не выбрал оценку. Я прокомментировал «ignore:»: hidden »в файле jquery.validate.js, но у меня все еще остается та же проблема

@ Html

<div class="col-md-10 col-sm-10">
  <div style="display:inline-block;" id="rateYo"></div>
     <input type="hidden" name="rating" id="rating_input" />                
  </div>
  <button type="submit" class="btn btn-primary btn-lg" id="btnSubmit"</button>

Javascript код

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>

// Setting the star value
   $(function () {

        $("#rateYo").rateYo({

            onSet: function (rating, rateYoInstance) {
                rating = Math.ceil(rating);
                $('#rating_input').val(rating);
            }
        });
    });

  // Validating when button is clicked

  $(function () {
        $('input[id$=btnSubmit]').click(function (z) {
            var x = document.getElementById("rating_input");               
            if (x.val == 0) {
                alert('Rating is Required');
                z.preventDefault();
            }
        });
    });

Answer 1

Пожалуйста, используйте var x = $('input#rating_input').val(), чтобы получить скрытое значение.

   $(function () {

        $("#rateYo").rateYo({

            onSet: function (rating, rateYoInstance) {
                rating = Math.ceil(rating);
                $('#rating_input').val(rating);
            }
        });
    });

  // Validating when button is clicked

  $(function () {
        $('#btnSubmit').click(function (z) {
            var x = $('input#rating_input').val()
            if (x == 0) {
                alert('Rating is Required');
                z.preventDefault();
            }
        });
    });

<div class="col-md-10 col-sm-10">
  <div style="display:inline-block;" id="rateYo"></div>
     <input type="hidden" name="rating" id="rating_input" value="0"/>                
  </div>
  <button type="submit" class="btn btn-primary btn-lg" id="btnSubmit"</button>
Javascript code

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>

// Setting the star value

Answer 2

Поскольку вы используете getElementById для получения узла rating_input DOM, вы должны использовать свойства DOM этого узла для доступа к значению ввода.

$("someSelector").val() - это способ получения атрибута value объекта jQuery. .val() является специфической функцией jQuery, которая доступна только при извлечении элементов DOM через jQuery - $("#rating_input").val() https://api.jquery.com/val/#val

Однако узлы DOM не имеют атрибута val. Вместо этого элементы input, в частности, имеют атрибут value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes

Итак, попробуйте if (x.value === 0).