Руководство Javascript Form Validation

Form Validation
Простой пример
Получить доступ в данные form
Submit через Javascript
Валидировать автоматически

1. Form Validation

Очень часто вы встречаете website (вебсайт), где пользователь вводит информацию в форму (form) перед тем как отправить на сервер. Например форму регистрации аккаунта. Информация, которую пользователь вводит в форму, должна быть валидирована (validate) для обеспечения рациональности данных.

Некоторые примеры аутентификации:

Проверьте и убедитесь, что данные не пусты.
Проверьте формат электронной почты
Проверьте формат номера телефона
..

В основном, имеются 3 способа для валидации данных:

Данные form будут отправлены на server (сервер), и валидация (validate) будет выполнена со стороны сервера.
Данные form будут валидированы со стороны client (клиента) используя\ Javascript, это поможет server работать меньше и увеличить продуктивность приложения.
Использовать оба метода выше для валидации form.

В данной статье я расскажу про использование Javascript для валидации (validate) form. Ниже является изображение действия программы, когда пользователь нажимает на кнопку Submit.

Вы должны зарегистрировать функцию в сочетании с событием onsubmit у form. Обязанность этой функции - проверять данные, введенные пользователем в form, и возвращать значение true, если вся введенная пользователем информация верна, и наоборот возвращать значение false.
Когда пользователь нажимает кнопку Submit, вызывается функция в сочетании с событием onsubmit.
Если функция в сочетании с событием onsubmit возвращает true, данные у form будут отправлены на server. Если наоборот, то Submit будет отменено.

2. Простой пример

OK, это простой пример, который поможет вам понять правила работы у Form перед тем как начать практиковать более сложные примеры.

Атрибут (attribute) action у <form> используетcя для определения страницы, на которую будут отправлены данные,. Или сказать по другому, это страница, которая обработает отправленные данные с <form> настоящей страницы.

Страницы обрабатывающие данные отправленные с form обычно написаны технологией Servlet/JSP, PHP или другой определенной технологией со стороны Server вместо страницы HTML. Но я не буду говорить об обработке данных в данной статье.

simple-validation-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>
      <script type = "text/javascript">
         function validateForm()  {
             var u = document.getElementById("username").value;
             var p = document.getElementById("password").value;

             if(u== "") {
                 alert("Please enter your Username");
                 return false;
             }
             if(p == "") {
                 alert("Please enter you Password");
                 return false;
             }

             alert("All datas are valid!, send it to the server!")

             return true;
         }
      </script>
   </head>
   <body>

      <h2>Enter your Username and Password</h2>

      <div style="border:1px solid #ddd; padding: 5px;">
         <form method="GET" action="process-action.html" onsubmit = "return validateForm()">
            Username: <input type="text" name="username" id="username"/>
            <br><br>
            Password: <input type="password" name = "password" id="password"/>
            <br><br>
            <button type="submit">Submit</button>
         </form>
      </div>

   </body>
</html>

process-action.html

<!DOCTYPE html>
<html>
   <head>
      <title>Process Action</title>

   </head>
   <body>

      <h3>Process Action Page</h3>

      OK, I got data!
      
      <br/><br/>

      <a href="javascript:history.back();">[Go Back]</a>

   </body>
</html>

3. Получить доступ в данные form

Получить доступ в данные одного поля (field) через ID поля.

<input type="text"  id="username"/>
<input type="password"  id="password"/>

// Access field via ID:
var field =  document.getElementById("fieldId");

var value = field.value;

Получить доступ в поля Form через атрибут name:

<form name="myForm" ...>
    <input type="text" name="username"/>
    <input type="password" name = "password"/>
    <button type="submit">Submit</button>
</form>

// Get form via form name:
var myForm = document.forms["myForm"];

var u = myForm["username"].value;
var p = myForm["password"].value;

Когда пользователь вводит неправильные данные на поле form, вам нужно оповестить пользователя и в то же время focus (сфокусировать) на то поле.

validation-example1.html

<!DOCTYPE html>
<html>
   <head>
      <title>Validation</title>
      <script type = "text/javascript">

         function validateForm()  {
             // Get form via form name:
             var myForm = document.forms["myForm"];

             var u = myForm["username"].value;
             var p = myForm["password"].value;

             if(u== "") {
                 alert("Please enter your Username");
                 myForm["username"].focus(); // Focus
                 return false;
             }
             if(p == "") {
                 alert("Please enter you Password");
                 myForm["password"].focus(); // Focus
                 return false;
             }

             alert("All datas are valid!, send it to the server!")

             return true;
         }
      </script>
   </head>
   <body>

      <h2>Enter your Username and Password</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" method="GET" action="process-action.html" onsubmit = "return validateForm()">
            Username: <input type="text" name="username"/>
            <br><br>
            Password: <input type="password" name = "password"/>
            <br><br>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Например: Попросить пользователя ввести число от 0 до 10.

validation-number-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Validation</title>
      <script type = "text/javascript">

         function validateForm()  {

             var myField = document.getElementById("myNumber");
             var value = myField.value;

             if( value == "" || isNaN(value) || value < 0 || value > 10)  {
                alert("Invalid input!");
                myField.focus();
                return false;
             }

             return true;
         }
      </script>
   </head>
   <body>

      <h2>Enter a Number between 0 and 10</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html" onsubmit = "return validateForm()">
            Number: <input type="text" id= "myNumber"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

4. Submit через Javascript

Нажмите на кнопку <button type="submit"> или <input type="submit"> внутри form, которая поможет вам отправить данные данного form к серверу, но вы так же можете это сделать через Javascript.

javascript-submit-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Javascript Submit</title>
      <script type = "text/javascript">

         function validateForm() {
             var name = document.forms["myForm"]["fullName"].value;
             if(name == "") {
                 alert("Please enter your name");
                 return false;
             }
             return true;
         }

         function submitByJavascript()  {

             var valid = validateForm();
             if(!valid)  {
               return;
             }

             var myForm = document.forms["myForm"];

             myForm.submit();
         }
      </script>
   </head>
   <body>

      <h2>Submit a from with Javascript</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html" onsubmit = "return validateForm()">
            Your Name: <input type="text" name = "fullName" value =""/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>
       <br/>

      <!-- A Button outside the form -->
      Button outside the form:
      <button onclick="submitByJavascript()">Click Me to submit form</button>

   </body>
</html>

5. Валидировать автоматически

Браузер может автоматически валидировать (validate) некоторые виды данных на form, например добавить атрибут required (обязательно) в поле у form, чтобы сказать браузеру что это поле обязательно, браузер автоматически проверяет и оповещает пользователю, если пользователь не ввел информацию в то поле.

Примечание: Слишком старые браузеры, как IE версии 9 или старее не поддерживают автоматический validate.

required-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Required</title>

   </head>
   <body>

      <h2>Required attribute</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html" onsubmit = "return validateForm()">
            Your Name: <input type="text" name = "fullName" value ="" required/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Некоторые новые элементы <input> были представлены в HTML 5, например color, date, datetime-local, email, month, number, range, search, tel, time, url, week,. Данные элементы имеют специальный атрибут (attribute) помогающий браузеру узнать как validate (валидировать) его данные автоматически. Ниже является список нескольких таких атрибутов:

Атрибут	Описание
disabled	Определить, что данный элемент Input будет отключен (disabled).
max	Определить максимальное значение данного элемента Input.
min	Определить минимальное значение данного элемента Input.
pattern	Определить pattern данного элемента Input.
required	Определить поле введения обязательным. Пользователь должен ввести данные.
type	Определить вид элемента Input.

Смотреть детальный список элементов <input> и соответствующие атрибуты к каждому элементу:
HTML Input types

Например: Элемент <input type="number"> с атрибутами min, max, браузер оповестит пользователя, если он/она введят число вне позволенного лимита.

attr-min-max-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>Min Max Attributes</title>

   </head>
   <body>

      <h2>Attribute min, max</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Enter your score (0-100):
            <input type="number" name = "score" min= "0" max = "100"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Например: Потребовать пользователя ввести код страны с 2-мя символами.

attr-pattern-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>pattern attribute</title>

   </head>
   <body>

      <h2>Attribute: pattern</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Country code:
            <input type="text" name = "countryCode" pattern="[A-Za-z]{2}"
              title="Two letter country code"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Например: Потребовать пользователя ввести пароль с минимум 8 символами.

attr-pattern-example2.html

<!DOCTYPE html>
<html>
   <head>
      <title>pattern attribute</title>

   </head>
   <body>

      <h2>Attribute: pattern</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Password:
            <input type="password" name = "password" pattern=".{8,}"
              title="8 or more characters"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Например: Потребовать пользователя ввести сильный пароль, с минимум 8 символами, минимум одной прописной буквой (uppercase), и минимум одна строчная буква (lowercase).

attr-pattern-password-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>pattern attribute</title>

   </head>
   <body>

      <h2>Attribute: pattern</h2>
      Password must contain 8 or more characters that are of at least one number,
      and one uppercase and lowercase letter:
      <br/><br/>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Password:
            <input type="password" name = "password"
              pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
              title="Invalid password!"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>

Пример: Потребовать пользователя ввести адрес электронной почты (email), используя атрибут pattern, чтобы гарантировать пользователь вводит email правильного формата.

attr-pattern-email-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>pattern attribute</title>

   </head>
   <body>

      <h2>Attribute: pattern</h2>

      <div style="border:1px solid #ddd; padding: 5px;">

         <form name="myForm" action="process-action.html">
            Email:
            <input type="password" name = "password"
              pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
              title="Invalid password!"/>
            <br/><br/>
            <button type="submit">Submit</button>
         </form>

      </div>

   </body>
</html>