Hướng dẫn form trong javascript

[Go Back]

3- Truy cập vào các dữ liệu của form

Truy cập vào dữ liệu của một trường [field] thông qua ID của trường.

// Access field via ID:
var field =  document.getElementById["fieldId"];

var value = field.value;

Truy cập vào các trường của Form thông qua thuộc tính name:

    
    
    Submit

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

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

Khi người dùng nhập dữ liệu không chính xác trên một trường của form, bạn nên thông báo cho người dùng đồng thời focus vào trường đó.

validation-example1.html

   
      Validation
      

         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;
         }
      
   
   

      
Enter your Username and Password

      


         
            Username: 
            


            Password: 
            


            Submit
         

      

   


 

Ví dụ: Yêu cầu người dùng nhập vào một số từ 0 đến 10.

validation-number-example.html

   
      Validation
      

         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;
         }
      
   
   

      
Enter a Number between 0 and 10

      


         
            Number: 
            


            Submit
         

      

   


 

4- Submit thông qua Javascript

Nhấn vào nút hoặc bên trong form giúp bạn gửi dữ liệu của form này tới máy chủ, tuy nhiên bạn cũng có thể làm điều đó thông qua Javascript.

javascript-submit-example.html

   
      Javascript Submit
      

         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[];
         }
      
   
   

      
Submit a from with Javascript

      


         
            Your Name: 
            


            Submit
         

      
       


      
      Button outside the form:
      Click Me to submit form

   


 

5- Validate tự động

Trình duyệt có thể tự động xác thực [validate] một vài loại dữ liệu trên form, chẳng hạn thêm thuộc tính required vào một trường của form để nói với trình duyệt rằng trường này là bắt buộc, trình duyệt sẽ tự động kiểm tra và thông báo cho người dùng nếu người dùng không nhập vào trường đó.

Chú ý: Các trình duyệt quá cũ, chẳng hạn IE phiên bản 9 hoặc cũ hơn không hỗ trợ validate tự động.

required-example.html

   
      Required

   
   

      
Required attribute

      


         
            Your Name: 
            


            Submit
         

      

   


 

Một vài loại phần tử mới được giới thiệu trong HTML 5, chẳng hạn color, date, datetime-local, email, month, number, range, search, tel, time, url, week,. Các phần tử này có các thuộc tính [attribute] đặc biệt giúp trình duyệt biết cách để validate dữ liệu của nó một cách tự động. Dưới đây là danh sách một vài thuộc tính như vậy:

Xem chi tiết danh sách các phần tử và các thuộc tính tương ứng với từng phần tử này:

• TODO Link?

Ví dụ: Một phần tử với các thuộc tính min, max, trình duyệt sẽ thông báo cho người dùng nếu họ nhập vào một con số nằm ngoài phạm vi cho phép.

attr-min-max-example.html

   
      Min Max Attributes

   
   

      
Attribute min, max

      


         
            Enter your score [0-100]:
            
            


            Submit
         

      

   

 

Ví dụ: Yêu cầu người dùng nhập vào một mã số quốc gia có 2 ký tự.

attr-pattern-example.html

   
      pattern attribute

   
   

      
Attribute: pattern

      


         
            Country code:
            
            


            Submit
         

      

   


 

Ví dụ: Yêu cầu người dùng nhập vào mật khẩu có ít nhất 8 ký tự.

attr-pattern-example2.html

   
      pattern attribute

   
   

      
Attribute: pattern

      


         
            Password:
            
            


            Submit
         

      

   

 

Ví dụ: Yêu cầu người dùng nhập vào một mật khẩu mạnh, có ít nhất 8 ký tự, có ít nhất một chữ hoa [uppercase], và có ít nhất một chữ thường [lowercase].

attr-pattern-password-example.html

   
      pattern attribute

   
   

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



      


         
            Password:
            
            


            Submit
         

      

   


 

Ví dụ: Yêu cầu người dùng nhập vào địa chỉ email, sử dụng thuộc tính pattern để đảm bảo người dùng nhập vào một email đúng định dạng.

attr-pattern-email-example.html

   
      pattern attribute

   
   

      
Attribute: pattern

      


         
            Email:
            
            


            Submit