为什么我不能同时运行其中两个功能?有人必须遇到同样的问题。我想要完成的是自动完成(或预填充)的字段,因为其他字段我希望一旦这些框中有东西就删除错误验证。
例如:
您有一个带有邮寄地址的表单,一个标记物理与邮件相同的复选框以及物理地址字段。在填写任何内容之前,用户点击提交,这使得所有必填字段周围都有一个红色的CSS框。您输入邮箱地址红色框消失。然后,您点击复选框并预填充物理地址,但在您单击之前不会删除红色框。我希望只要某些东西填入字段,红色框就会消失,无论它是否已预先填充。如果这对任何人都有意义,请发表评论。
$(document).on('change blur keyup mouseup ', function() {
if ($('#locality1').val() !== '') {
$('#locality1').valid();
}
if ($('#administrative_area_level_11').val() !== '') {
$('#administrative_area_level_11').valid();
}
if ($('#postal_code1').val() !== '') {
$('#postal_code1').valid();
}
if ($('#auto2complete1').val() !== '') {
$('#auto2complete1').valid();
}
if ($('#locality21').val() !== '') {
$('#locality21').valid();
}
if ($('#administrative_area_level_121').val() !== '') {
$('#administrative_area_level_121').valid();
}
if ($('#postal_code21').val() !== '') {
$('#postal_code21').valid();
}
if ($('#clocality1').val() !== '') {
$('#clocality1').valid();
}
if ($('#cadministrative_area_level_11').val() !== '') {
$('#cadministrative_area_level_11').valid();
}
if ($('#cpostal_code1').val() !== '') {
$('#cpostal_code1').valid();
}
if ($('#locality2').val() !== '') {
$('#locality2').valid();
}
if ($('#administrative_area_level_12').val() !== '') {
$('#administrative_area_level_12').valid();
}
if ($('#postal_code2').val() !== '') {
$('#postal_code2').valid();
}
if ($('#auto2complete2').val() !== '') {
$('#auto2complete2').valid();
}
if ($('#locality22').val() !== '') {
$('#locality22').valid();
}
if ($('#administrative_area_level_122').val() !== '') {
$('#administrative_area_level_122').valid();
}
if ($('#postal_code22').val() !== '') {
$('#postal_code22').valid();
}
if ($('#locality3').val() !== '') {
$('#locality3').valid();
}
if ($('#administrative_area_level_13').val() !== '') {
$('#administrative_area_level_13').valid();
}
if ($('#postal_code3').val() !== '') {
$('#postal_code3').valid();
}
if ($('#auto2complete3').val() !== '') {
$('#auto2complete3').valid();
}
if ($('#locality23').val() !== '') {
$('#locality23').valid();
}
if ($('#administrative_area_level_123').val() !== '') {
$('#administrative_area_level_123').valid();
}
if ($('#postal_code23').val() !== '') {
$('#postal_code23').valid();
}
if ($('#locality4').val() !== '') {
$('#locality4').valid();
}
if ($('#administrative_area_level_14').val() !== '') {
$('#administrative_area_level_14').valid();
}
if ($('#postal_code4').val() !== '') {
$('#postal_code4').valid();
}
if ($('#auto2complete4').val() !== '') {
$('#auto2complete4').valid();
}
if ($('#locality24').val() !== '') {
$('#locality24').valid();
}
if ($('#administrative_area_level_124').val() !== '') {
$('#administrative_area_level_124').valid();
}
if ($('#postal_code24').val() !== '') {
$('#postal_code24').valid();
}
if ($('#locality5').val() !== '') {
$('#locality5').valid();
}
if ($('#administrative_area_level_15').val() !== '') {
$('#administrative_area_level_15').valid();
}
if ($('#postal_code5').val() !== '') {
$('#postal_code5').valid();
}
if ($('#auto2complete5').val() !== '') {
$('#auto2complete5').valid();
}
if ($('#locality25').val() !== '') {
$('#locality25').valid();
}
if ($('#administrative_area_level_125').val() !== '') {
$('#administrative_area_level_125').valid();
}
if ($('#postal_code25').val() !== '') {
$('#postal_code25').valid();
}
});
$(document).on('change blur keyup mouseup ', function() {
if ($('#blocality1').val() !== '') {
$('#blocality1').valid();
}
if ($('#badministrative_area_level_11').val() !== '') {
$('#badministrative_area_level_11').valid();
}
if ($('#bpostal_code1').val() !== '') {
$('#bpostal_code1').valid();
}
if ($('#bauto2complete1').val() !== '') {
$('#bauto2complete1').valid();
}
if ($('#blocality21').val() !== '') {
$('#blocality21').valid();
}
if ($('#badministrative_area_level_121').val() !== '') {
$('#badministrative_area_level_121').valid();
}
if ($('#bpostal_code21').val() !== '') {
$('#bpostal_code21').valid();
}
if ($('#clocality1').val() !== '') {
$('#clocality1').valid();
}
if ($('#cadministrative_area_level_11').val() !== '') {
$('#cadministrative_area_level_11').valid();
}
if ($('#cpostal_code1').val() !== '') {
$('#cpostal_code1').valid();
}
if ($('#blocality2').val() !== '') {
$('#blocality2').valid();
}
if ($('#badministrative_area_level_12').val() !== '') {
$('#badministrative_area_level_12').valid();
}
if ($('#bpostal_code2').val() !== '') {
$('#bpostal_code2').valid();
}
if ($('#bauto2complete2').val() !== '') {
$('#bauto2complete2').valid();
}
if ($('#blocality22').val() !== '') {
$('#blocality22').valid();
}
if ($('#badministrative_area_level_122').val() !== '') {
$('#badministrative_area_level_122').valid();
}
if ($('#bpostal_code22').val() !== '') {
$('#bpostal_code22').valid();
}
if ($('#blocality3').val() !== '') {
$('#blocality3').valid();
}
if ($('#badministrative_area_level_13').val() !== '') {
$('#badministrative_area_level_13').valid();
}
if ($('#bpostal_code3').val() !== '') {
$('#bpostal_code3').valid();
}
if ($('#bauto2complete3').val() !== '') {
$('#bauto2complete3').valid();
}
if ($('#blocality23').val() !== '') {
$('#blocality23').valid();
}
if ($('#badministrative_area_level_123').val() !== '') {
$('#badministrative_area_level_123').valid();
}
if ($('#bpostal_code23').val() !== '') {
$('#bpostal_code23').valid();
}
if ($('#blocality4').val() !== '') {
$('#blocality4').valid();
}
if ($('#badministrative_area_level_14').val() !== '') {
$('#badministrative_area_level_14').valid();
}
if ($('#bpostal_code4').val() !== '') {
$('#bpostal_code4').valid();
}
if ($('#bauto2complete4').val() !== '') {
$('#bauto2complete4').valid();
}
if ($('#blocality24').val() !== '') {
$('#blocality24').valid();
}
if ($('#badministrative_area_level_124').val() !== '') {
$('#badministrative_area_level_124').valid();
}
if ($('#bpostal_code24').val() !== '') {
$('#bpostal_code24').valid();
}
if ($('#blocality5').val() !== '') {
$('#blocality5').valid();
}
if ($('#badministrative_area_level_15').val() !== '') {
$('#badministrative_area_level_15').valid();
}
if ($('#bpostal_code5').val() !== '') {
$('#bpostal_code5').valid();
}
if ($('#bauto2complete5').val() !== '') {
$('#bauto2complete5').valid();
}
if ($('#blocality25').val() !== '') {
$('#blocality25').valid();
}
if ($('#badministrative_area_level_125').val() !== '') {
$('#badministrative_area_level_125').valid();
}
if ($('#bpostal_code25').val() !== '') {
$('#bpostal_code25').valid();
}
});
我也试过将它们组合起来并将下半部分与顶部相加但它只运行脚本的顶部。如果我切换它并首先开始下半部分,那么只有那部分起作用。有人可以请教我这是什么原因造成的?我想if语句它会一直在列表中运行而不是中途停止。
答案 0 :(得分:2)
所有代码都可以简化为
$(document).on('change blur', "input", function() {
var isValid = this.value.length>0;
$(this).valid(isValid);
});
/* Just to make example run */
jQuery.fn.extend({
valid: function(isValid) {
return this.each(function() {
var color = isValid ? "lime" : "pink";
$(this).css("background-color", color);
});
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />
&#13;
问题是用户可以返回并更改文本,它将无效。