使用AJAX/JQUERY验证多个输入，并更改输入的css
使用AJAX/JQUERY验证多个输入，并更改输入的css
提问于 2013-08-27 23:45:15
我有一个表单，其多个输入具有相同的名称和括号，如下所示：
<input name=foo[] id=foo[]/>我使用括号使用PHP作为数组处理输入，而且输入量不是固定的。
我试图使用AJAX/JQUERY添加一些表单验证，因为每个输入都必须包含一个已经在数据库中的值。一旦选中，我希望将输入的CSS更改为绿色(如果正确)和红色(如果错误)。
AJAX部分正在工作，但我无法让JQUERY单独更改输入的CSS (所有输入都已更改)；
下面是我使用的代码：
<script>
$(document).change(function() {
$('input[id="foo[]"]').each(function() {
$(this).change(validate);
});
});
function validate() {
var foo = $(this).val();
if(foo == "" || foo.length < 4) {
$('input[id="foo[]"]').css('border', '3px #C33 solid');
} else {
jQuery.ajax({
type: "POST",
url: "common/check.php",
data: 'foo='+ foo,
cache: false,
success: function(response) {
if(response == 0) {
$('input[id="foo[]"]').css('border', '3px #C33 solid');
} else {
$('input[id="foo[]"]').css('border', '3px #00FF00 solid');
}
}
});
}
}
</script>谢谢你的帮忙!
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-08-28 00:20:29
我修改了你的密码。试试这个：
$('input[id="foo[]"]').change(function() {
var foo = $(this).val();
var fooInput = $(this);
if(foo == "" || foo.length < 4) {
fooInput.css('border', '3px #C33 solid');
} else {
jQuery.ajax({
type: "POST",
url: "common/check.php",
data: 'foo='+ foo,
cache: false,
success: function(response) {
if(response == 0) {
fooInput.css('border', '3px #C33 solid');
} else {
fooInput.css('border', '3px #00FF00 solid');
}
}
});
}
});这是FIDDLE。
注意：避免使用相同ID的元素，这会在项目扩展时给您带来麻烦。
Stack Overflow用户
发布于 2013-08-28 00:16:01
试着删除“”。
$('input[id=foo[]]').css('border', '3px #C33 solid');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18477209
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号