Проверка HTML на кнопку или скрытое поле

Question

интересно, может ли кто-нибудь помочь.Как часть формы, я использую выбор кнопок для получения удовлетворения, а не радио или раскрывающийся список.Я использую jquery для захвата значения кнопки и добавления его в скрытое поле - поле, которое форма использует для отправки информации.

Все работает нормально, однако я хочу поставить проверку, чтобы убедиться, что ответ получен - но проверка HTLM5 не поддерживает кнопки или скрытые поля.Есть ли где я могу использовать JS, чтобы проверить, была ли нажата кнопка при отправке, и если нет, переключить HTML-валидатор для этого поля?

Вот код, который у меня есть;

    <div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities: <span class="required ">*</span></label>
<input required="required" type="hidden" name="feedbackQuestions[56]" id="feedbackQuestions_56">
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][0]" value="Excellent">Excellent</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][1]" value="Good">Good</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][2]" value="Satisfactory">Satisfactory</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][3]" value="Poor">Poor</button></div>
</div>
    <script>
            $('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
                e.preventDefault();
                $('#feedbackQuestions_56_group .satisfactionBtn').each(function( index ) {
                    $( this ).removeClass('active');
                });
                var thisval = $(this).val();
                $('#feedbackQuestions_56').val(thisval);
                $(this).addClass('active');
            });
          </script>
</div>

Я знаю, что мне нужно добавить триггер к кнопке отправки дальше по странице, чтобы я мог сделать jquery .click () и затем предотвратить событие, пока я не проверил, но не уверен, как на самом деле проверить иликак запустить проверку.

Answer 1

Я бы на самом деле сохранил ее как глобальную переменную JS, а не как скрытое поле.Вы можете переопределить это значение для скрытого поля через jQuery, если хотите, но я не вижу в этом смысла.Также div можно выбирать в JS, поэтому вам не нужно, чтобы они были просто одним или другим.

var isSelected = false;
            $('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
                e.preventDefault();
                $('#feedbackQuestions_56_group .satisfactionBtn').each(function (index) {
                    $(this).removeClass('active');
                });
                var thisval = this.id;
                console.log("thisval: " + thisval);
                $('#feedbackQuestions_56').val(thisval);
                $(this).addClass('active');
                isSelected = true
            });

            $('#onSubmit').click(function () {
                console.log(isSelected);

                //
                // Look into ajax post command
                //


                if (isSelected == true) {
                    //    ajax call here
                }
                else {
                    alert("Please select a rating")
                }

            })

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.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/4.1.0/js/bootstrap.min.js"></script>

    <div class="form-group">
        <label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities:
            <span class="required ">*</span>
        </label>
        <div id="feedbackQuestions_56_group" class="row">
            <div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block"  name="Questions[56][0]" id="Excellent">Excellent
            </div>
            <div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block"  name="Questions[56][1]" id="Good">Good
            </div>
            <div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block"  name="Questions[56][2]" id="Satisfactory">Satisfactory
            </div>
            <div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block"  name="Questions[56][3]" id="Poor">Poor
            </div>

            <div class=" btn btn-primary btn-lg btn-block" id="onSubmit">Submit</div>
        </div>

Answer 2

Поскольку это значение скрытого поля заполняется кодом, а не пользователем, код должен проверять значение (или не нужно проверять).

Звучит очень странно, что скрытое поле необходимо проверить.

Отредактировано

Если вам действительно нужно проверить скрытое поле, оригинальный способ не работает, но вы можете сделать это хитро, просто добавив непрозрачность: стиль 0 .

Добавление такого стиля делает его невидимым, но не скрытым, поэтому проверка должна работать как обычно.

Но просто помните, что вы должны изменить тип = "скрытый" до type = "text"