Validate Single Input

Using a toggle button to populate an inputs field, and validate at the same time.

by TheOrdinaryGeek

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap-responsive.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap2-toggle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<p>Does this item have an inventory number?</p>
<p>
  <form id="myForm" method="post">
    <input type="checkbox" class="input-large" value='1' name="btn" id="btn">
    <div class="control-group">
      <div class="controls">
        <div class="input-prepend">
          <input type="text" class="input-large" id="num" name="num" placeholder="Number">
        </div>
      </div>
    </div>
    <input type="submit" class="submit" value="Submit">
  </form>

JavaScript

$(function() {
  $('#btn').bootstrapToggle({
    on: 'No',
    off: 'Yes',
    onstyle: 'danger'
  });
  $("#myForm").validate({
    rules: {
      num: {
        required: true,
        minlength: 2
      }
    },
    highlight: function(label) {
      $(label).closest('.control-group').addClass('error');
    },
    unhighlight: function(label) {
      $(label).closest('.control-group').addClass('success');
    },
  });
})

$("#btn").on("change", function() {
  if ($(this).prop('checked') == true) {
    $("#num").attr("readonly", "true");
    $("#num").val("Personal Item");
    $("#num").valid();
  }
  if ($(this).prop('checked') == false) {
    $("#num").removeAttr("readonly");
    $("#num").val("");
    $("#num").rules("add", {
      required: true,
      minlength: 5,
      maxlength: 6
    });
    $("#num").valid();
  }
});