Question

我有输入字段

    <div class="form-group">
        <label class="control-label col-md-3" for="StarRate">Star Rate</label>
        <div class="col-md-9">
            <input class="form-control" placeholder="Enter star rate" type="range" name="StarRate" min="1" max="6" step="1" oninput="outputUpdate(value)" value="">
            <output for="StarRate" id="rating"></output>
        </div>
    </div>

jquery代码是

$(document).ready(function() {
    $('#form_id').bootstrapValidator();
});
function outputUpdate(vol) {
    document.querySelector('#rating').value = vol;
}

问题在于，当我选择最大值，即6时，它会显示错误消息This value is not valid。所以这里出了什么问题。

Answer 1

我为你做了一个JSFiddle：

https://jsfiddle.net/m6xjp821/

发现一些错误，<input .... value=""中的错误可能是其中一个原因。

其次，我为outputUpdate函数做了一个解决方法。

小提琴正在发挥作用。

新的Html代码：

<div class="form-group">
     <label class="control-label col-md-3" for="StarRate">Star Rate</label>
        <div class="col-md-9">
            <input id="switcher" class="form-control" placeholder="Enter star rate" type="range" name="StarRate" min="1" max="6" step="1" value="1">
            <output for="StarRate" id="rating"></output>
        </div>
 </div>

新JS代码：

$(document).ready(function() {
     $('#form_id').bootstrapValidator();
});

$("#switcher").on("input", function() {
    console.log("test");
    document.getElementById('rating').value = $("#switcher").val();
});

Bootstrap Validator - 输入类型范围的错误最大值验证

1 个答案: