I'm working on a web form with several fields and a submit button. When the button is clicked, I have to verify that the required text boxes have been filled in and that the phone number is in the correct format. I can only accept 7 or 10 digit phone numbers, but characters such as (,), (-), etc are acceptable. If this box is empty or the phone number isn't in the correct format (not 7 or 10 numbers long, not a number) or has been left blank, I have to add a red border around the text box. This border is supposed to remain in place until the user corrects the error.
I can't get this to work properly. I have tried several different ways to go about doing this, but have gotten several different types of errors. One way seemed to work, but the red border only displayed for a second and then disappeared and the value in the textbox was reset.
Here is my code and a link to a jsfiddle I've created:
Javascript:
<script type=text/javascript>
function validateForm() {
return checkPhone();
}
function checkPhone() {
var phone = document.forms[myForm][phone].value;
var phoneNum = /^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(phone.value.match(phoneNum)) {
return true;
}
else {
document.getElementById(phone).className = document.getElementById(phone).className + error;
return false;
}
}
</script>
HTML:
<form name=myForm onsubmit = return validateForm()>
Phone Number: <input type=text id=phone><br>
</form>
JSFiddle:
