Валидация HTML-формы без использования скриптов и php

HTML
05.06.2017

Нашел очень крутой пример валидации HTML-форм без Javascript и без PHP, оригинальная статья выложена здесь.

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

Пример валидации без javascript можно посмотреть здесь:

See the Pen Form with a bunch of HTML5 Validation and CSS3 Help by Chris Coyier (@chriscoyier) on CodePen.0

Код немного упрощенный можно увидеть здесь:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container{
      display: block;
      margin: 40px auto;
      max-width: 960px;
    }
    input{
      padding: 2px 5px;
      margin-bottom: 5px;
    }
    form{
      max-width: 450px;
    }
    form div{
      position: relative;
    }
    form div label{
      opacity: 0.3;
      position: absolute;
      top: 2px;
      left: 10px;
    }
    div input:focus + label{
      opacity: 0;
    }
    div input:valid{
      background-image: url(check.png);
      background-size: 20px;
      padding-left: 23px;
      background-repeat: no-repeat;
      background-position: 0 0;
    }
    div input:valid + label{
      opacity:0;
    }
    input:invalid:not(:focus):not(:placeholder-shown){
      background: pink;
    }
    input:invalid:not(:focus):not(:placeholder-shown) + label{
      opacity: 0;
    }
    input:invalid:focus:not(:placeholder-shown) ~ .requirements{
      max-height: 200px;
      padding: 5px 10px;
    }
    .requirements{
      padding: 0 10px;
      color: #999;
      max-height: 0;
      transition: 0.28s;
      overflow: hidden;
      color: red;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div class="container">
    <form>
      <div>
        <input type="text" id="name" name="Name" placeholder=" " required>
        <label for="name">Name</label>
      </div>
      <div>
        <input type="email" id="email" name="E-mail" placeholder=" " required>
        <label for="email">Email</label>
        <div class="requirements">Введите правильный Email</div>
      </div>
      <div>
        <input type="text" id="phone" name="Phone" placeholder=" " required>
        <label for="phone">Phone</label>
      </div>
      <button>Send</button>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="common.js"></script>
</body>
</html>

Все стили нужно настраивать под себя. Форма без обработчика, только HTML и CSS. Форму с обработчиком можно взять здесь — Универсальный скрипт формы обратной связи.

Вот пример формы немного сложнее и красивее:

See the Pen Validate contact form on CSS and HTML by Denis (@deniscreative) on CodePen.0

И вот такой получается полностью рабочий код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Validate contact form on CSS and HTML</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700,900" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <style>
    h1 {
      margin-bottom: 30px;
      font-family: "Titillium Web", sans-serif;
      font-weight: bold;
      text-align: center;
    }
    .contact-form input {
      border: 0 none;
      border-bottom: 1px solid #b9b9b8;
      width: 100%;
      font-family: "Lato", sans-serif;
      font-size: 16px;
      line-height: 32px;
      padding: 5px;
      margin-bottom: 45px;
      outline: none;
      background: #fff;
    }
    .contact-form .captcha-wrap {
      margin-bottom: 45px;
    }
    .contact-form .btn {
      font-size: 24px;
      line-height: 54px;
      border: none;
      width: 100%;
      padding: 10px;
      font-weight: 700;
      text-align: center;
      outline: none;
      border-radius: 4px;
    }
    .contact-form .btn:hover {
      background-color: #e6a700;
    }
    .contact-form label {
      color: #7f7f7e;
      position: absolute;
      top: 8px;
      left: 20px;
      transition: 0.28s;
    }
    .contact-form input:focus + label {
      top: -20px;
      font-size: 12px;
    }
    .contact-form input:invalid {
      box-shadow: none;
    }
    .contact-form input:valid {
      border-bottom: 1px solid #161613;
    }
    .contact-form input:valid + label {
      top: -20px;
      font-size: 12px;
    }
    .contact-form input:invalid:not(:focus):not(:placeholder-shown) {
      border-bottom: 1px solid #d3362a;
    }
    .contact-form input:invalid:not(:focus):not(:placeholder-shown) + label {
      top: -20px;
      font-size: 12px;
    }
    .contact-form input:invalid:focus:not(:placeholder-shown) ~ .requirements {
      max-height: 20px;
    }
    .contact-form .requirements {
      position: absolute;
      bottom: 20px;
      padding: 0 5px;
      max-height: 0;
      transition: 0.28s;
      overflow: hidden;
      font-size: 14px;
      line-height: 20px;
      color: #d3362a;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <h1>Contact Form</h1>
        <form class="contact-form" autocomplete="off">
          <div class="row">
            <div class="col-md-6">
              <input type="text" id="name" name="Name" placeholder=" " required>
              <label for="name">Your name *</label>
            </div>
            <div class="col-md-6">
              <input type="email" id="email" name="E-mail" placeholder=" " required>
              <label for="email">Email *</label>
              <div class="requirements">Error text</div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <input type="text" id="message" name="Message" placeholder=" " required>
              <label for="message">Message *</label>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 captcha-wrap">
              <img src="https://denis-creative.com/wp-content/uploads/2017/06/captcha.jpg" alt="">
            </div>
            <div class="col-md-6">
              <button type="submit" class="btn">Send message</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

</body>
</html>

Обратите внимание, что в примере я подключаю гугловские шрифты и bootstrap.min.css.

Рекомендую к прочтению:

Комментарии (3) к “Валидация HTML-формы без использования скриптов и php”

Оставить комментарий