JQuery验证按钮切换输入

时间:2018-08-17 15:28:26

标签: javascript jquery html forms jquery-validate

我在网络表单中使用Jquery Validate。我有一个空的输入,但是单击按钮会动态填充文本。当我这样做时,验证似乎不起作用。

  • 当输入为空时,提交验证有效(输入变为红色)。
  • 动态填充输入时,它保持红色,应变为绿色

我的代码在下面,这里是fiddle;

在小提琴中,在输入为空时单击提交,然后将按钮切换到No-输入应更改为绿色,而无需再次提交表单。

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
    });
  }
});

1 个答案:

答案 0 :(得分:0)

您在highlight上使用了一些自定义unhighlightcontrol-group

只需将其添加到checked==true条件中即可:

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

由于该规则已删除,因此不会重新验证...

您的Fiddle updated