Breaking News: Grepper is joining You.com. Read the official announcement!

phone number error input red border

Marc Gabriel Lasheras answered on October 11, 2022 Popularity 1/10 Helpfulness 1/10

answer phone number error input red border

phone number error input red border

Comment

<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>

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: border input phone-number red whatever

Link to this answer
Share Copy Link

Contributed on Oct 11 2022

Marc Gabriel Lasheras

0 Answers Avg Quality 2/10

phone number error input red border

Contents

More Related Answers

phone number error input red border

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.