JQuery Validate Input on Button Toggle

Question

I'm using Jquery Validate in my web form. I have an empty input, however the input is populated dynamically with text on the click of a button. Validation doesn't seem to work when I do this.

when the input is empty, on submit validation works (input turns red).
when input is populated dynamically, it stays red, it should turn green

My code is below and here's a fiddle;

In the fiddle, click submit when the input is empty, then toggle the button to No - the input should change to green without having to submit the form again.

HTML

<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="type" name="type" placeholder="Inventory Number">
        </div>
      </div>
    </div>

    <input type="submit" class="submit" value="Submit">
  </form>

Jquery

$(function() {
  $('#btn').bootstrapToggle({
    on: 'No',
    off: 'Yes',
    onstyle: 'danger'
  });
})
$("#myForm").validate({
  rules: {
    type: {
      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) {
    $("#type").attr("readonly", "true");
    $("#type").val("Personal Item");
    $("#type").rules("remove", "number minlength maxlength");
  }
  if ($(this).prop('checked') == false) {
    $("#type").removeAttr("readonly");
    $("#type").val("");
    $("#type").rules("add", {
      required: true,
      minlength: 5,
      maxlength: 6
    });
  }
});

Louys Patrice Bessette · Accepted Answer · 2018-08-20 14:28:33Z

0

You use some custom highlight and unhighlight on the control-group.

Just add this to the checked==true condition:

$("#type").closest('.control-group').removeClass("error").addClass("valid");
$("#type").next(".error").remove();

Since the rule is removed, it is not re-validated...

Your Fiddle updated.

edited Aug 20, 2018 at 14:28

answered Aug 17, 2018 at 15:59

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheOrdinaryGeek Over a year ago

Thanks @Louys Patrice Bessette but that doesn't seem to work? In your fiddle, click submit when the input is empty, turnd red, great. Now toggle the button to No - the input should dynamically populate and change to green without having to click submit again. So, it should validate on toggle I guess?

Louys Patrice Bessette Over a year ago

I updated the Fiddle too. The form validates on submit... Not on other click. And there is no green color for valid inputs by default... But you can add a CSS class for it.

Collectives™ on Stack Overflow

JQuery Validate Input on Button Toggle

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related