menu
Ad goes here

Sunday, 17 July 2016

The easiest way of form validation using HTML and CSS only

The easiest way of form validation using HTML and CSS only

Form is one of the most important part for any websites and a perfect form make you happy as administrator or users. If your form looks bad or not enough smart then the chances of generating leads is minimum. Most of them we use JavaScript to validate the form and we all know how its difficult for new comers; later we introduced with HTML5 and realized that it will work for all.

You can create impressive form and validate it using only HTML5 attributes and CSS. Lets have a look on details that how it works.

Placeholder: The placeholder help user to understand the uses of fields so we will make place holder using labels. The label will show above the input field using relative and absolute position and once focus on the field the label opacity will be in zero.


Download Form Validation Sample Download Form Validation Demo

HTML for Placeholder:
<form action="#0" class="smart-form">

<div>

<input id="first_name" name="first_name" placeholder=" " required="" type="text" />

<label for="first_name">First Name</label>

</div>

</form>


CSS for Placeholder:
.smart-form > div {
  position: relative;
  background: white;
  border-bottom: 1px solid #ccc;
}
.smart-form > div > label {
  opacity: 0.3;
  font-weight: bold;
  position: absolute;
  top: 22px;
  left: 20px;
}
.smart-form > div > input[type="text"],
.smart-form > div > input[type="email"],
.smart-form > div > input[type="password"] {
  width: 100%;
  border: 0;
  padding: 20px 20px 20px 50px;
  background: #fff;
}
.smart-form > div > input[type="text"]:focus,
.smart-form > div > input[type="email"]:focus,
.smart-form > div > input[type="password"]:focus {
  outline: 0;
  background: #fff;
  box-shadow:blue 0px 0px 2px inset
}
.smart-form > div > input[type="text"]:focus + label,
.smart-form > div > input[type="email"]:focus + label, 
.smart-form > div > input[type="password"]:focus + label {
  opacity: 0;
}
Required for valid and invalid form fields:
  1. The required attribute will make the field valid and its extreme faster way to catch errors. The numbers and email simply validate using required attribute.
  2. The browser can send valid and invalid information through :valid and :invalid CSS selector
  3. The pattern attribute will make client side validation with character limit, upper case, lower case and number too.


Pattern:
<input pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" type="password" id="password" name="password" required placeholder=" ">

Complete HTML
<form class="smart-form" action="#0">

  <div>
    <input type="text" id="first_name" name="first_name" required placeholder=" " />
    <label for="first_name">First Name</label>
  </div>
  
  <div>
    <input type="text" id="last_name" name="last_name" required placeholder=" " />
    <label for="last_name">Last Name</label>
  </div>
  
  <div>
    <input type="email" id="email" name="email" required placeholder=" " />
    <label for="email">Email Address</label>
    <div class="requirements">
      Must be a valid email address.
    </div>
  </div>
  
  <div>
    <input type="password" id="password" name="password" required placeholder=" " pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" />
    <label for="password">Password</label>
    <div class="requirements">
      Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.
    </div>
  </div>
  
  <input type="submit" value="Sign Up" />

</form>

Complete CSS


.smart-form {
  max-width: 450px;
  margin: 0 auto;
}
.smart-form > div {
  position: relative;
  background: white;
  border-bottom: 1px solid #ccc;
}
.smart-form > div > label {
  opacity: 0.3;
  font-weight: bold;
  position: absolute;
  top: 22px;
  left: 20px;
}
.smart-form > div > input[type="text"],
.smart-form > div > input[type="email"],
.smart-form > div > input[type="password"] {
  width: 100%;
  border: 0;
  padding: 20px 20px 20px 50px;
  background: #fff;
}
.smart-form > div > input[type="text"]:focus,
.smart-form > div > input[type="email"]:focus,
.smart-form > div > input[type="password"]:focus {
  outline: 0;
  background: #fff;
  box-shadow:blue 0px 0px 2px inset
}
.smart-form > div > input[type="text"]:focus + label,
.smart-form > div > input[type="email"]:focus + label,
.smart-form > div > input[type="password"]:focus + label {
  opacity: 0;
}
.smart-form > div > input[type="text"]:valid,
.smart-form > div > input[type="email"]:valid,
.smart-form > div > input[type="password"]:valid {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/check.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 20px 20px;
}
.smart-form > div > input[type="text"]:valid + label,
.smart-form > div > input[type="email"]:valid + label,
.smart-form > div > input[type="password"]:valid + label {
  opacity: 0;
}
.smart-form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
.smart-form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown),
.smart-form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) {
  background: pink;
}
.smart-form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label,
.smart-form > div > input[type="email"]:invalid:not(:focus):not(:placeholder-shown) + label,
.smart-form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label {
  opacity: 0;
}
.smart-form > div > input[type="text"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
.smart-form > div > input[type="email"]:invalid:focus:not(:placeholder-shown) ~ .requirements,
.smart-form > div > input[type="password"]:invalid:focus:not(:placeholder-shown) ~ .requirements {
  max-height: 200px;
  padding: 0 30px 20px 50px;
}
.smart-form > div .requirements {
  padding: 0 30px 0 50px;
  color: #999;
  max-height: 0;
  -webkit-transition: 0.28s;
  transition: 0.28s;
  overflow: hidden;
  color: red;
  font-style: italic;
}
.smart-form input[type="submit"] {
  display: block;
  width: 100%;
  margin: 20px 0;
  background: #ff0000;
  color: white;
  border: 0;
  padding: 20px;
  font-size: 1.2rem;
  cursor:pointer;
}
* {
  box-sizing: border-box;
}

Download Form Validation Sample Download Form Validation Demo

4 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here.
    Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India .
    or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry.
    HTML5 CSS3 Javascript Online Training from India

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here.
    Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India .
    or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry.
    HTML5 CSS3 Javascript Online Training from India

    ReplyDelete

Books for you (Crafted with )