1000Hz的驗證器檢查爲最小值，最大值，和特定值

Question

參照該問題的幫助how to use custom validators of github.com/1000hz/bootstrap-validator

我有兩個數字輸入的形式，和1000Hz的驗證器插件誤差最小值，最大值，和任何值超過9000.

允許的最小值爲1，最大值爲100，但如果值超過9000（9001或更高）並且必須覆蓋最大值錯誤消息，則需要單獨的錯誤。

代碼片斷

$('#syrUnitForm').validator({ 
 
    custom: { 
 
    threshold: function($el) { 
 
     var threshold = parseInt($el.data('threshold')); 
 
     if ($el.val() > threshold) { 
 
     return "IT'S OVER 9000!!!"; 
 
     } 
 
    } 
 
    } 
 
}); 
 

 
// disable rxFindSyr button until valid nits are entered 
 
$('#rxFindSyr').attr('disabled', true); 
 

 
$('#minUnits, #maxUnits').on('blur change copy click cut keypress keyup paste', function() { 
 
    var validator = $("#syrUnitForm").data("bs.validator"); 
 

 
    if (!validator.hasErrors()) { 
 
    $('#rxFindSyr').attr('disabled', false); 
 
    } else { 
 
    $('#rxFindSyr').attr('disabled', true); 
 
    } 
 
});

/* 
 
* === PRIMARY CSS === 
 
*/ 
 

 
@import url(https://fonts.googleapis.com/css?family=Varela+Round); 
 
html, 
 
body, 
 
h4 { 
 
    min-height: 100%; 
 
    font-family: 'Varela Round', sans-serif !important; 
 
} 
 

 
body { 
 
    margin-bottom: 70px; 
 
    background: #79c23f; 
 
    /* IE9 */ 
 
    background: -webkit-gradient(top, circle cover, #c2e3a8, #79c23f 70%); 
 
    background: -o-radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%); 
 
    background: -moz-radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%); 
 
    background: -webkit-radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%); 
 
    background: -ms-radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%); 
 
    background: radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c2e3a8', endColorstr='#79c23f', GradientType=0); 
 
} 
 

 
label { 
 
    font-weight: 700; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <br /> 
 
    <div class="row" id="rxSyrBlock"> 
 
    <form class="form-horizontal" id="syrUnitForm"> 
 
     <!-- start sub column 1 --> 
 
     <div class="col-sm-4"> 
 
     <div class="form-group col-sm-12"> 
 
      <label for="minUnits">Minimum injectin:</label> 
 
      <input value="9001" type="number" class="form-control" id="minUnits" placeholder="Between 1-100" min="1" data-min-error="Too low, bro" max="100" data-max-error="Too high" data-threshold="9000" data-threshold-error="IT'S OVER 9000!!!" required> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
     <div class="form-group col-sm-12"> 
 
      <label for="maxUnits">Maximum injectin:</label> 
 
      <input value="9001" type="number" class="form-control" id="maxUnits" placeholder="Between 1-100" min="1" data-min-error="Too low, bro" max="100" data-max-error="Too high" data-threshold="9000" data-threshold-error="IT'S OVER 9000!!!" required> 
 
      <div class="help-block with-errors"></div> 
 
     </div> 
 
     <div class="form-group col-sm-12"> 
 
      <button type="button" id="rxFindSyr" class="btn btn-primary">Find syringes</button> 
 
     </div> 
 
     </div> 
 
     <!-- end sub column 1 --> 
 

 

 
     <!-- start sub column 2 --> 
 
     <div class="col-sm-6" id="syrResults"> 
 

 
     <label>Result:</label> 
 
     <p>&nbsp;</p> 
 

 
     </div> 
 
     <!-- end sub column 2 --> 
 

 
    </form> 
 
    </div> 
 
    <!-- end nested row | syringes --> 
 
</div>

鏈接擺弄：https://jsfiddle.net/7jt9qaqe/3/

我的問題是它似乎在SO上的代碼片段中工作，但它顯示了兩個錯誤消息（「過高」和「超過9000」）。在我的小提琴中，只有最大誤差正在工作（「太高」）。

有沒有辦法可以隱藏「太高」的消息，而不做一些CSS hackery？我首先想到的是：

#myForm div.form-group div.help-block ul.list-unstyled li:first-child { 
    display: none; 
} 

但是，這會隱藏最大錯誤（例如，如果他們輸入101）。長話短說，如果他們輸入101-9000之間的數字表示「太高」，如果他們輸入9001或更高的數字說「超過9000」，並且如果他們輸入1-100之間的數字，則它是有效的條目。

Answer 1

對不起，作爲回答，而不是發表評論，但我需要在這裏發佈一些代碼。

它看起來像自定義函數根本沒有被調用。我試圖設置max="9000"和處理這種情況與信息「9000」，然後使用自定義功能設置輸入100多家這樣的驗證：

$('#myForm').validator({ 
    custom: { 
    hundred: function ($el) { 
     var threshold = parseInt($el.data('hundred')); 
     if ($el.val() > threshold) { 
     return `OVER 100 mate!`; 
     } 
    } 
    } 
}); 

和標記<input data-hundred="100">。根據它的文件，這應該起作用。你有沒有試過在項目上打開一個問題？

Answer 2

放棄了，用CSS

#syrUnitForm div.help-block ul li:nth-child(2) { 
    position: absolute; 
    margin-top: -20px; 
    background: #f5f5f5 
}