JQuery 验证按钮切换上的输入
Posted
技术标签:
【中文标题】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 类。以上是关于JQuery 验证按钮切换上的输入的主要内容,如果未能解决你的问题,请参考以下文章