使用JavaScript输入错误时更改边框颜色 [英] Changing Border Color When Incorrect Input With Javascript
问题描述
我正在处理一个表单，该表单应该在用户单击提交"按钮时验证几个文本框中的输入.如果任何需要的框保留为空白或输入或格式的类型不正确，则应满足要求，这些文本框的边框将变为红色并恢复为正常的颜色.
例如，假设电话号码的长度为7或10位数字，如果用户输入的是6位数字，例如(123456)，则当用户再输入一个数字时，该字段周围的边框将变为红色，像(1234567)一样，边框应立即恢复为常规颜色，而无需用户再次单击提交"按钮.
我的代码的编写方式，当用户输入的数字太少时，边框会变成红色，但是，必须单击提交"按钮，边框才能恢复为原始颜色.有没有一种方法可以改变颜色，而无需再次单击该按钮?
这是我的代码:
<html>
<head>
<title>Project 4</title>
<style type="text/css">
.error {
border:2px solid red;
}
</style>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
Phone Number:<input type="text" id="phone">
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function validateForm() {
return checkPhone();
}
function checkPhone() {
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {
return true;
}
else if(phoneNum.length < 7 || phoneNum.length > 10) {
//document.getElementById("phone").className = document.getElementById("phone").className + " error";
//document.getElementById("phone").className = document.getElementById("phone").className.replace(" error", "");
document.getElementById("phone").style.borderColor="red";
return false;
}
}
</script>
</body>
</html>
我故意写了once a user submits the form，因为您不想知道访客只键入了一个字符并且正得到验证错误，从而使访客蒙蔽. (他将再输入5个字符)
<html>
<head>
<title>Project 4</title>
<style type="text/css">
.error {
border:2px solid red;
}
</style>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
Phone Number:<input type="text" id="phone">
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
//at first, we define a variable stating that an event listener has been attached onto the field
var validatePhoneOnKeyUpAttached = false;
function validateForm() {
//then, we attach the event listened to the field after the submit, if it has not been done so far
if(!validatePhoneOnKeyUpAttached) {
document.getElementById("phone").onkeyup = checkPhone;
validatePhoneOnKeyUpAttached = true;
}
return checkPhone();
}
function checkPhone() {
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {
document.getElementById("phone").style.borderColor="transparent";//and you want to remove invalid style
return true;
}
else if(phoneNum.length < 7 || phoneNum.length > 10) {
//document.getElementById("phone").className = document.getElementById("phone").className + " error";
//document.getElementById("phone").className = document.getElementById("phone").className.replace(" error", "");
document.getElementById("phone").style.borderColor="red";
return false;
}
}
</script>
</body>
I'm working on a form that is supposed to validate the input in several textboxes when the user clicks the "submit" button. If any of the required boxes are left blank or have an incorrect type of input or format, the border of those textboxes is supposed to turn red and return to the normal color when the requirements are met.
For example, a phone number is either supposed to be 7 or 10 digits long, if the user enters a six digit number like (123456), the border around this field should turn red, when the user enters one more number, like (1234567), the border should go back to it's regular color immediately, without the user having to click the "submit" button again.
How my code is written, the border does turn red when the user enters too few numbers, however, the submit button must be clicked for the border to go back to its original color. Is there a way to change the color back without the button being clicked a second time?
Here is my code:
<html>
<head>
<title>Project 4</title>
<style type="text/css">
.error {
border:2px solid red;
}
</style>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
Phone Number:<input type="text" id="phone">
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function validateForm() {
return checkPhone();
}
function checkPhone() {
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {
return true;
}
else if(phoneNum.length < 7 || phoneNum.length > 10) {
//document.getElementById("phone").className = document.getElementById("phone").className + " error";
//document.getElementById("phone").className = document.getElementById("phone").className.replace(" error", "");
document.getElementById("phone").style.borderColor="red";
return false;
}
}
</script>
</body>
</html>
Once a user submits the form with invalid data, you can attach onkeyup event listener into a input field, and everythime a user types something into the field, the form will be validated
document.getElementById("phone").onkeyup = validateForm;
I wrote once a user submits the form on purpose, since you do not want to fool your visitor by knowing that he typed only one character and he is getting validation error. (he is about to type 5 more characters)
EDIT:
<html>
<head>
<title>Project 4</title>
<style type="text/css">
.error {
border:2px solid red;
}
</style>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
Phone Number:<input type="text" id="phone">
<br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
//at first, we define a variable stating that an event listener has been attached onto the field
var validatePhoneOnKeyUpAttached = false;
function validateForm() {
//then, we attach the event listened to the field after the submit, if it has not been done so far
if(!validatePhoneOnKeyUpAttached) {
document.getElementById("phone").onkeyup = checkPhone;
validatePhoneOnKeyUpAttached = true;
}
return checkPhone();
}
function checkPhone() {
var phone = document.forms["myForm"]["phone"].value;
var phoneNum = phone.replace(/[^\d]/g, '');
if(phoneNum.length > 6 && phoneNum.length < 11) {
document.getElementById("phone").style.borderColor="transparent";//and you want to remove invalid style
return true;
}
else if(phoneNum.length < 7 || phoneNum.length > 10) {
//document.getElementById("phone").className = document.getElementById("phone").className + " error";
//document.getElementById("phone").className = document.getElementById("phone").className.replace(" error", "");
document.getElementById("phone").style.borderColor="red";
return false;
}
}
</script>
</body>
这篇关于使用JavaScript输入错误时更改边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
