突出显示空输入字段
我有一个用户输入数字的表单。点击时会调用一个函数。我想突出显示并清空任何无效字段(不是数字)。到目前为止,它突出显示并清除所有输入。我只需要那些没有填写的,或者输入不是数字的。突出显示空输入字段
\t function validatefilledIn() {
\t \t "use strict";
\t \t var arr = document.getElementsByName('qty');
\t \t var score = document.getElementById('total');
\t \t
\t \t for(var i=0; i<arr.length;i++){
\t \t \t if(isNaN(parseInt(arr[i].value))) {
\t \t \t \t
\t \t \t \t alert("Please make sure all the fields are filled in.");
\t \t \t \t $('input').val('').css("border-color", "red");
\t \t \t \t $('#form1').find('#total').val('');
\t \t \t \t return false;
\t \t \t }
\t \t \t
\t \t }
\t }
<form name="myForm" id="form1">
<fieldset>
<input type="text" name="qty" id="qty1" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty3" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty5" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty6" oninput="findTotal()"class="hvr-pop" required/>
</fieldset>
</form>
随着if(isNaN(arr[i].value) || arr[i].value == "")
它的工作!
function validatefilledIn() {
var arr = document.getElementsByName('qty');
for(var i=0; i<arr.length;i++){
if(isNaN(arr[i].value) || arr[i].value == "") {
$(arr[i]).val('').css("border-color", "red");
}
}
}
HTML全文:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function findTotal() {
}
function validatefilledIn() {
var arr = $("[name='qty']");
$.each(arr, function(i, o) {
if(isNaN($(o).val()) || $(o).val() == "") {
$(o).val('').css("border-color", "red");
} else {
$(o).css("border-color", "green");
}
});
}
</script>
<form name="myForm" id="form1">
<fieldset>
<input type="text" name="qty" id="qty1" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty2" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty3" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty4" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty5" oninput="findTotal()" class="hvr-pop" required/>
<input type="text" name="qty" id="qty6" oninput="findTotal()" class="hvr-pop" required/>
</fieldset>
<button onClick="validatefilledIn()">Check</button>
</form>
</body>
</html>
谢谢佩特雷斯,但它仍然选择所有输入。我只想在空白的边框上添加一个红色边框。 – invincibleme
'''$('input')'''会选择所有的输入,所以你也只需要选择那些数据不好的。 – petres
是的,这是我不知道该怎么做的,选择那些输入错误的。我试过 $(arr [i]).val('').css(“border-color”,“red”);但它返回唯一的第一个输入框,而不是空的。谢谢你的帮助! – invincibleme
您计划如何与服务器名称相同的字段之间的区别? –
你有什么建议?我认为它可以通过函数中的名字循环。 – invincibleme
我是否需要更改我的问题?不知道该怎么办。 – invincibleme