对按钮或隐藏文件进行 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 将此值重新解析为隐藏字段，但我看不出它有什么用处。也可以在 JS 中选择 div，因此您不需要它们只是其中一个。

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

由于隐藏字段值是由代码而非用户填充的，因此代码应验证该值（或无需验证）。

隐藏字段需要验证，这听起来很奇怪。

已编辑

如果你真的需要验证 hidden 字段，原来的方法是行不通的，但你可以通过添加 opacity:0 样式来实现。

添加这样的样式使其不可见但不隐藏，因此验证应该像往常一样正常工作。

但请记住，您必须将 type="hidden" 更改为 type="text"