Twitter Bootstrap Question posted in

1000hz validator check for min, max, and specific value – Twitter bootstrap

Referring to this question for help how to use custom validators of github.com/1000hz/bootstrap-validator

I have a form with two number inputs, and 1000hz validator plugin to error for min value, max value, and any value over 9000.

Min value allowed is 1, Max value is 100, but I need a separate error if the value is above 9000 (9001 or greater) and must override the max value error message.

Code snippet

$('#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>

Link to fiddle: https://jsfiddle.net/7jt9qaqe/3/

My problem is it seems to be working in the code snippet here on SO, but it is showing both error messages (“Too high” and “Over 9000”). In my fiddle only the max error is working (“Too high”).

Is there a way I can hide the “Too high” message without doing some css hackery? I first thought of adding:

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

But that would hide the max error (e.g. if they entered 101). Long story short, if they enter a number between 101-9000 say “Too high”, if they enter a number 9001 or greater say “OVER 9000”, and if they enter a number between 1-100, it’s a valid entry.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Gave up and hacked it with css

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

  2. 0

    Sorry to post as an answer instead of in a comment but I need to post some code here.

    It looks like the custom function wasn’t invoked at all. I tried to set max="9000" and handle that case with message “OVER 9000” and then use a custom function to set validation of input more than 100 this way:

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

    and the markup <input data-hundred="100">. According to its documentation this should have worked. Have you tried opening an issue on the project?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search