CODEWITHSUNDEEP
javascripthtmlcssvalidation
user2932587
user2932587

Reputation:

Changing Border Color When Incorrect Input With Javascript

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>

Upvotes: 0

Views: 40496

Answers (3)

Ivan Han&#225;k
Ivan Han&#225;k

Reputation: 2306

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>

Upvotes: 3

Dave
Dave

Reputation: 10924

Use the blur event of your input like this:

<input type="text" id="phone" onblur="validateForm();">

The blur event runs when you control loses the focus. If you need something more immediate you will need to use the keyup event.

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You can simply add onkeyup handler for input field:

<input type="text" id="phone" onkeyup="checkPhone()" />

and also make checkPhone function remove error class if input is valid:

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").className = '';
        return true;
    } 
    else if (phoneNum.length < 7 || phoneNum.length > 10) {
        document.getElementById("phone").className = 'error';
        return false;
    }
}

Demo: http://jsfiddle.net/bcxLz4wh/

Upvotes: 1

Related Questions