Validate номер мобильного телефона в JavaScript

Question

Я хочу, чтобы подтвердить свой номер мобильного телефона, используя JavaScript и мой код:

function checkLength(){ 
    var textbox = document.getElementById("textbox"); 
    if(textbox.value.length == 10){ 
     alert("success"); 
    } 
    else{ 
     alert("mobile number must be 10 digits long"); 
     textbox.focus(); 
     return false; 
    } 
} 

и вызова функции является: <input type="text" name="Contact-No." id="textbox" required >Contact(Mobile No.)

<input type="submit" value="Submit" onclick="checkLength()">

Все работает нормально, но после того, как показывает предупреждающее сообщение, как надо вернуться на ту же страницу, но она приведет меня к другой пустой странице.

Answer 1

удалите событие onClick с кнопкой и добавьте onSubmit в <form..>. Нечто вроде <form onSubmit='return checkLength();>'.

Answer 2

1) Ваша форма должна предотвращать действие отправки по умолчанию, чтобы, если вы нашли ошибку, форма фактически не отправляется. Вы должны подключиться к событию onsubmit в своей форме.

пример предполагает, что вы включили JQuery 1.7+ на странице

HTML

<form id="myform" action="/"> 
    <input type="text" name="Contact-No." id="textbox" /> 
    Contact(Mobile No.)<br><br> 
    <input type="submit" value="Submit" id="submit" /> 
</form> 

Javascript

$("#myform").on("submit",function(e){ 
    if(checkLength()==false){ 
     alert('prevent form submit'); 
     e.preventDefault(); 
    }else{ 
     alert('form submits as normal'); 
    } 
}); 

function checkLength(){ 
    var textbox = document.getElementById("textbox"); 
    if(textbox.value.length == 10){ 
     alert("success"); 
     return true; 
    } 
    else{ 
     alert("mobile number must be 10 digits long"); 
     textbox.focus(); 
     return false; 
    } 
} 

пример по адресу:

http://jsfiddle.net/Lqbn6unp/

Answer 3

Как указано в другом месте, слушатель должен находиться в обработчике отправки формы, так как форма может быть отправлена ​​без нажатия кнопки отправки. Кроме того, вы можете ссылаться на элементы управления формой как именованные свойства формы, что более эффективно, чем использование getElementById и означает, что элементу управления не нужен идентификатор.

Так что передайте ссылку на форму от слушателя, например.

В форме:

<form onsubmit="return checkLength(this)" ... > 
    <input type="text" name="Contact-No." required >Contact(Mobile No.) 

затем в функции:

function checkLength(form) { 
    var textbox = form['Contact-No']; 

    if (textbox.value.length == 10) { 
     alert("success"); 

    } else { 
     alert("mobile number must be 10 digits long"); 
     textbox.focus(); 
     return false; 
    } 
}