JSFiddle - React, Tailwind, and code Playground

by luubinhan

HTML

<form>
  <labe>Chỉ nhập email</label>
  <input name="your_email" type="email" />
  <hr />
  <labe>Chỉ nhập số</label>
  <input name="your_money" type="number" />
  <hr />
  <labe>Chỉ nhập url</label>
  <input name="your_website" type="url" />
  <hr />
  <label for="choose">Bạn chỉ có thể nhập "cherry" hoặc "banana"</label>
  <input id="choose" name="i_like" required pattern="banana|cherry">
  <hr />
  <div>
    <label for="choose">từ 3 đến 6 ký tự</label>
    <input id="choose" name="i_like" required minlength="3" maxlength="6">
  </div>
  <div>
    <label for="number">Từ 1 đến 10</label>
    <input type="number" id="number" name="amount" value="1" min="1" max="10">
  </div>
  <div>
    <label>Số điện thoại</label>
    <input type="text" name="phone"
       pattern="(\+84|0)\d{9,10}"
       title="Nhập số điện thoại từ 10 đến 11 số" />
  </div>
  <button>Gửi</button>
</form>

<hr />

Tùy biến câu thông báo
<form id="myform" novalidate>
  <p>
    <label for="mail">
      <span>Vui lòng nhập địa chỉ email:</span>
      <input type="email" required id="mail" name="mail">
      <span class="error" aria-live="polite"></span>
    </label>
  </p>
  <button>Gửi</button>
</form>

CSS

input:out-of-range {
  border: 2px solid red;
}

input:in-range {
  border: 2px solid black;
}
input:invalid {
  border: 2px solid red;
}

input:valid {
  border: 2px solid black;
}

JavaScript

var form  = document.getElementById('myform');
var email = document.getElementById('mail');
var error = document.querySelector('.error');

email.addEventListener("input", function (event) {
  // kiểm tra khi user bắt đầu nhập
  if (email.validity.valid) {
    // nếu valid, remove
    error.innerHTML = ""; 
    error.className = "error"; 
  }
}, false);

form.addEventListener("submit", function (event) {
  // kiểm tra khi user click submit.
  if (!email.validity.valid) {
    error.innerHTML = "Baby à, cho anh địa chỉ email chứ";
    error.className = "error active";
    // chặn việc submit form
    event.preventDefault();
  }
}, false);