LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
This field is required
This field is required
This field is required
Your email address is invalid
This field is required
Must be a valid 10 digit phone number
This field is required
Message must be over 10 characters
Message must not exceed 100 characters
CSS
/* 
  Credit: http://www.sanwebe.com/2013/10/css-html-form-styles
*/

.elegant-aero {
  margin-left:auto;
  margin-right:auto;
  margin-top: 25px;
  max-width: 600px;
  background: #D2E9FF;
  padding: 20px 20px 20px 20px;
  font: 12px Arial, Helvetica, sans-serif;
  color: #666;
}

.elegant-aero label {
  display: block;
  margin: 0px 0px 5px;
}

.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea {
  color: #888;
  width: 60%;
  padding: 0px 0px 0px 5px;
  border: 1px solid #C5E2FF;
  background: #FBFBFB;
  outline: 0;
  -webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
  box-shadow: inset 0px 1px 6px #ECF3F5;
  font: 200 12px/25px Arial, Helvetica, sans-serif;
  height: 30px;
  line-height:15px;
  margin: 2px 6px 16px 0px;
}

.elegant-aero textarea{
  height:100px;
  padding: 5px 0px 0px 5px;
  width: 60%;
}

div{
  display:inline-block;
  vertical-align:top;
  color: red;
  margin-top: 5px;
}
JS
var app = angular.module('app', ['ngMessages']);
Host Instantly Drag and Drop Website Builder

 

Description

Pen for article: http://www.sitepoint.com/easy-form-validation-angularjs-ngmessages
Term
Mon, 11/27/2017 - 21:58

Related Codes

Pen ID
Pen ID
Pen ID