hitechfocus

Form Validation Với HTML5

Discussion in 'CSS' started by Maskters, Jun 13, 2015. Lượt xem: 2,490

  1. Maskters

    Maskters Administrator Staff Member

    Data form validation

    Trước đây khi kiểm tra dữ liệu trên các form chúng ta thường sử dụng những đoạn code javasript, rất dài, để kiểm tra dữ liệu form trước khi gửi chúng lên server để xác nhận. Nó là những lý do khiến cho chúng ta mất nhiều thời gian hơn để xác nhận dữ liệu trên các máy chủ, nhưng không hẳn chúng ta có thể xác nhận dữ liệu bằng javascrip, có nhiều nhiều cách khác nhau để xác nhận dữ liệu,
    [​IMG]

    Bài viết này tôi sẽ giới thiệu với các bạn xác nhận dữ liệu một cách đơn giản bằng cách sử dụng các thẻ và thuộc tính trong html


    Sử dụng hình thức xác nhận được cung cấp từ trình duyệt
    Một trong những tính năng của HTML5 là khả năng xác nhận hầu hết dữ liệu người dùng mà không cần dựa vào javascript. Điều này được thực hiện bằng cách sử dụng các thuộc tính xác nhận trên các yếu tố hình thức.
    Nếu người dùng để trống dữ liệu trong các ô <input>, trình duyệt sẽ ngăn chặn và sẽ hiển thị các thông báo lỗi.
    Một ví dụ đơn giản khi sử dụng các thẻ <input> Demo
    HTML:
    <form>
    <label>Bạn chọn một quả chuối hay một chái táo</label>
    <input id="choose" name="i_like" pattern="chuoi|tao">
    <buttom>Submit</buttom>
    </form>
    Trong ví dụ này, <input> thẻ input chỉ chấp nhận 1 trong 3 chuỗi( rỗng, chuối hay chuỗi, táo)
    HTML:
    input:invalid { border: 1px solid red;}
    input:valid{ border: 1px solid green;}
    Nếu một ô phần tử bạn muốn người dùng không được để trống trước khí được gửi đi, chúng ta sẽ sử dụng các thuộc tính bắt buộc. Khi thuộc tính này được áp dụng thẻ input này sẽ thông báo lỗi khi người dùng để trống
    HTML:
    <form>
    <label for="choose">Would you prefer a banana or a cherry?</label>
    <input name="i_like" id="choose" pattern="chuoi|tao" required>
    <button>submit</button>
    </form>
    Tất cả thẻ trong form đều được hổ trợ các thuộc tính cần thiết trong html5 để kiểm tra dữ liệu
    Trong html5 ở 2 thẻ (<input> hoặc <textarea>) có thể bị hạn chế về kích thước bằng cách sử dụng thuộc tính maxlength. Một trường sẽ không hợp lệ nếu có giá trị dài hơn giá trị mà thuộc tính maxlength quy định. Trình duyệt sẽ tự không cho phép người dùng gõ một giá trị dài hơn dự kiến quy đĩnh sẵn vào trường văn bản.
    HTML:
    <form>
    <textarea name="mesage" maxlength="120" minlength="10"></textarea>
    </form>
    Đối với các trường nhập vào là số, min và max cũng là thuộc tính cung cấp các xác nhận. Nếu giá trị của lĩnh vực nhập vào thấp hơn so với các thuộc tính min hoặc cao hơn so với các thuộc tính max, trường này sẽ là không hợp lệ.
    HTML:
    <form>
    <input type="number" min="12" max="120" step="1" id="n1" name="age"
    pattern="\d+">
    </form>[/HTML
    HTML:
    Mail
    <form>
    <input type="email" id="t2" name="email">
    </form>
    Nếu người dùng nhập không có @ trình duyệt sẽ thông báo lỗi
    Chúng ta kết hợp thêm css để hiển thị lỗi nhập của người dùng bằng cách sử dung (invalid, valid)
    Tôi diễn giải như thế này, nếu người người dùng nhập sai sẽ cho kết quả thẻ input sẽ hiển thị border màu đỏ, nếu người nhập đúng thì thẻ input sẽ hiển thị border màu xanh
    Ví dụ nhỏ

    HTML:
    <form>
    <label for="choose">Would you prefer a banana or a cherry?</label></br>
    <input id="choose" name="i_like" pattern="banana|cherry">
    <button>Submit</button>
    </form>
    input:invalid {
      border: 1px solid red;
    }
    input:valid {
      border: 1px solid green;
    }
    
    Thông báo lỗi tùy chỉnh
    Như chúng ta đã thấy trong tất cả các ví dụ trên, mỗi khi người dùng cố gắng để gửi một hình thức không hợp lệ, trình duyệt sẽ hiển thị một thông báo lỗi. Cách thông báo này được hiển thị sẽ bị phụ thuộc vào trình duyệt.
    Cách kiểm tra lỗi này có 2 nhược điểm
    • Không hiển thị được thông báo lỗi theo ý muốn của người lập trình website
    • Kiểm tra lỗi form sẽ bị phụ thuộc vào trình duyệt, điều đó có nghĩa rằng những hiển thị thông báo ở mỗi trình duyệt sẽ là khác nhau, tùy thuộc vào trình duyệt quy đinh kiểu thông báo như thế nào.

    Phiên bản tiếng Pháp của các trình duyệt trên một trang tiếng Anh

    [​IMG]
    Để tùy chỉnh sự xuất hiện nội dung của các tin nhắn thông báo, bạn phải sử dụng JavaScript
    HTML5 cung cấp các ràng buộc xác nhận API để kiểm tra và tùy chỉnh trạng thái của một yếu tố hình thức. Nó có thể thay đổi thông báo hiển thị. Dưới đây là một số ví dụ nhỏ
    HTML:
    <form>
    <label for="mail">Vui lòng cung cấp địa chỉ mail</label>
    <input id="mail" name="email" tyle="email"/>
    <button>Submit</button>
    </form>
    PHP:
    ar email document.getElementById("mail");

    email.addEventListener("keyup", function (event) {
      if(
    email.validity.typeMismatch) {
        
    email.setCustomValidity("I expect an e-mail, darling!");
      } else {
        
    email.setCustomValidity("");
      }
    });
    Form kiểm tra dữ liệu từ HTML5 - Demo
    HTML:
    <form action="" method="post">
        <fieldset>
            <legend>Booking Details</legend>
            <div>
                <label for="name">Name:</label>
                <input id="name" name="name" value="" required  pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" aria-required="true" aria-describedby="name-format">
                <span id="name-format" class="help">Format: firstname lastname</span>
            </div>
            <div>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" value="" required aria-required="true">
            </div>
            <div>
                <label for="website">Website:</label>
                <input type="url" id="website" name="website" value="">
            </div>
            <div>
                <label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
                <input type="number" id="number" name="number" value="" required aria-required="true" min="1" max="4">
            </div>
            <div class="submit">
                <input type="submit" value="Submit">
            </div>
        </fieldset>
    </form>

    Phần kết luận

    Trong bài viết này chúng ta đã áp dụng HTML5 với hình thức xác nhận dữ liệu từ người dùng mà không cần sử dụng JavaScript.
    Sau đó áp dụng CSS3 pseudo-classes để hiển thị các thông báo đẹp mắt đến với người dùng, phân biệt dữ liệu hợp lệ và không hợp lệ.
    author

    About the author

    Hey, my name is Maskters (T.A). I´m a Web Developer but love graphic design from KHANH HOA and I'm the creator of Hitechfocus.com .
    Last edited: Jul 3, 2015

Share This Page