JQuery 验证按钮切换上的输入

Posted 2023-05-09

【中文标题】JQuery 验证按钮切换上的输入

【英文标题】：JQuery Validate Input on Button Toggle

【发布时间】：2019-01-24 16:29:40

【问题描述】：

我在我的网络表单中使用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】：

您在control-group 上使用了一些自定义的highlight 和unhighlight。

只需将此添加到checked==true 条件：

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

由于规则被删除，它没有被重新验证...

你的Fiddle updated。

【讨论】：

感谢@Louys Patrice Bessette，但这似乎不起作用？在您的小提琴中，当输入为空时单击提交，变成红色，太好了。现在将按钮切换为否 - 输入应动态填充 并且 变为绿色，而无需再次单击提交。那么，我猜它应该在切换时验证？

我也更新了 Fiddle。表单在提交时验证...而不是在其他点击时验证。并且默认情况下有效输入没有绿色...但是您可以为其添加 CSS 类。