Search code examples
javascriptregistration

how to validate registration only if the user types something


so that's what I'm trying to work with atm, but it doesn't work in the sense that when the user doesn't enter anything, he will get the "your phone number includes 10 numbers" alert although it should go straight into 'else' and display nothing & let him pass. the point of this code is to validate the phone number only if the user actually types it, so that I won't get nonsense numbers in my database - but I'm not forcing the user to type in his number either. the part that doesn't work is the if & else part. everything inside the 'if' works on its own, But I don't want to force users to type their phone number, so I added these if & else.

function CheckPhone() {
        var x = document.getElementById("phone").value;
            if (x == "" || x.length > 0) {
                if (x == "" || x.length == 10) {
                    document.getElementById("errorPhone").innerHTML = "your phone number includes 10 numbers"
                    return false;
                }
                for (var s = 0; s < x.length; s++) {
                    if (!('0' <= x.charAt(s) && x.charAt(s) <= '9')) {
                        document.getElementById("errorPhone").innerHTML =
                            "<span style='color:Red'>your phone number can only contain numbers</span>";
                        return false;
                    }
                }
                document.getElementById("errorPhone").innerHTML = "";
                return true;
            }
            else {
                document.getElementById("errorPhone").innerHTML = "";
                return true;
            }
    }


Solution

    • Intially check if there is a value. If not return and stop further execution.
    • If there's a value check if it is a number or not. return false if not.
    • If it is a number check if it has got 10 digits. return false if not.
    function CheckPhone() {
        let x = document.getElementById("phone").value.trim();
        document.getElementById("errorPhone").innerHTML = "";
    
        // when there is no value entered in the field
        // return true if there is no value in the field
        if ( x == "" ) {
            return true;
        }
    
        // check if the value is a number
        if ( !isNaN(parseInt(x)) ) {
    
            // when x is a number
            // check if the number has got 10 digits
            if ( x.length != 10 ) {
    
                // when number of digits of x is not equal to 10
                document.getElementById("errorPhone").innerHTML = "your phone number includes 10 numbers";
                return false;
            } else {
    
                // when number of digits of x is equal to 10
                return true;
            }
    
        } else {
    
            // when x is not a number
            document.getElementById("errorPhone").innerHTML = "<span style='color:Red'>your phone number can only contain numbers</span>";
            return false;
        }
    }