JavaScript on click

Question

I am trying to get this phone number validation of the ground, but I am having issues with the onclick method, why is this not working?

function validatePhone(){
    var phone  = document.getElementById("phone1").value;
    if(phone.length === 0) {
        alert("phone number is required.");
    }
}

<form>
    <p>Please enter your phone number below:</p>
    <input id="phone1" placeholder="(000)000-0000" />
    <input type="submit" value="send message" onclick="validatePhone()" />
</form>

Answer 1

Change type of input to button because if type is submit validatePhone() will be never reached :

function validatePhone()
{
    var phone  = document.getElementById("phone1").value;

    if(phone.length === 0) {
        document.getElementById("result").textContent ="phone number is required.";
    }
}

<form>
    <p>Please enter your phone number below:</p>
    <input id="phone1" placeholder="(000)000-0000" />
    <input type="button" value="send message" onclick="validatePhone()" />
</form>
<span id='result'></span>

Or you can use onsubmit :

function validatePhone(e)
{
    e.preventDefault();

    var phone  = document.getElementById("phone1").value;

    if(phone.length === 0) {
        document.getElementById("result").textContent ="phone number is required.";

        return false;
    }
}

<form onsubmit="validatePhone()"
    <p>Please enter your phone number below:</p>
    <input id="phone1" placeholder="(000)000-0000" />
    <input type="submit" value="send message" />
</form>
<span id='result'></span>

Answer 2

You need to add validation logic to onsubmit event on form element instead. Some people, like me, may use Enter button to submit form instead of using mouse.

Also you may add HTML5 required attribite and change type to phone, so mobile users will get numeric keypad

<input id="phone1" type="phone" required placeholder="(000)000-0000" />