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

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

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

<强>被修改

如果您确实需要验证隐藏字段，原始方式无法正常工作，但只需添加不透明度：0 样式即可实现。

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

但请记住，您必须将类型=＆＃34;隐藏＆＃34; 更改为类型=＆＃34;文字＆＃34;

按钮或隐藏文件上的html验证

2 个答案: