HariantoAtWork/Input-field-validation-without-javascript.markdown

## index.html
<ul class="themeBox">
  <li title="#FF0067" style="background: #FF0067"></li>
  <li title="#FF3D6A" style="background: #FF3D6A"></li>
  <li title="#E7FF04" style="background: #E7FF04"></li>
  <li title="#9CFF00" style="background: #9CFF00"></li>
  <li title="#56FF00" style="background: #56FF00"></li>
</ul>

<div class="container">
  <h2>Form</h2>

<form class="form1" role="form">
  <h3>Example 1</h3>
  <!--Full name-->
	<label for="name1">Full name<span class="required">*</span></label>
	<input class="form-control" type="text" name="name1" id="name1" placeholder="Enter your name" title="What is your name?" required data-input="name" />
	<span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
  <!--Email address-->
	<label for="email1">Email address<span class="required">*</span></label>
	<input class="form-control" type="email" name="email1" id="email1" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" placeholder="e.g. info@yourwebdomain.com" title="What mail should I reply to?" required data-input="email">
	<span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
  <!--Subject -->
	<label for="subject1">Subject<span class="required">*</span></label>
	<input class="form-control" type="text" name="subject1" id="subject1" placeholder="Give a subject" title="Make a witty subject" required data-input="subject">
	<span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
	<label for="message1">Message<span class="required">*</span></label>
	<textarea class="form-control" name="message1" rows="7" id="subject1" placeholder="What&rsquo;s your story" title="Give me some attention!" required data-input="message"></textarea>
	<span class="boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>


  <ul class="errormsg-list">
    <li class="msg msg--name">Full name is required</li>
    <li class="msg msg--email">Your email is not valid</li>
    <li class="msg msg--subject">Think of a nice subject</li>
    <li class="msg msg--message">Tell me something you need</li>
  </ul>
  <div class="row-fluid">
    <button type="submit" class="btn btn-invert">Submit</button>
  </div>

</form>


  <form class="form2">
    <h3>Example 2</h3>
    <label for="name2">Full name<span class="required">*</span></label>
    <div>
      <input class="form-control" type="text" name="name2" id="name2" placeholder="Enter your name" required data-input="name" />
      <span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
    </div>
    <label for="email2">Email address<span class="required">*</span></label>
    <div>
      <input class="form-control" type="email" name="email2" id="email2" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" placeholder="e.g. info@yourwebdomain.com" required data-input="email">
      <span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
    </div>
  </form>

  <ul class="errormsg-list">
    <li class="msg msg--name">Full name is required</li>
    <li class="msg msg--email">Your email is not valid</li>
  </ul>

</div><!--/.container-->

## Input-field-validation-without-javascript.markdown

      
    Raw
  

              Input-field-validation-without-javascript.markdown
            
          
    Input field validation without javascript

input field with RegExp pattern validation and LESS styling. Using extra sibling div element with Font Awesome font to indicate if an input field is validated.
Using extra sibling div element for error messages.
No background image has been used.
No Javascript
On Example 2, there is no parent-parent selector, which is not possible to select other errormsg elements
A Pen by Harianto van Insulinde on CodePen.
License.

  
## pGCKB.markdown

      
    Raw
  

              pGCKB.markdown
            
          
    pGCKB

A Pen by Harianto van Insulinde on CodePen.
License.

  
## style.less
@import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
@import url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css');
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900,100italic,300italic,400italic,500italic,700italic,900italic|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Roboto+Slab:400,100,300,700);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

// ------------------------------
// MIXINS
// ------------------------------
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-base: 'Roboto Slab', @font-family-sans-serif;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);

// ------------------------------
// THEME COLORS
// ------------------------------
ul.themeBox {
  margin:0;
  padding:0;
  list-style:none;
  border-bottom:1px solid black;
  padding-bottom: 1px;
  > li {
    font-size:0;
    line-height:0;
    height:10px;
    display: inline-block;
    width:20%;
    float:left;
  }
}
// ------------------------------
// TYPOGRAPHY
// ------------------------------
h1,h2,h3,h4,h5,h6 {
  font-family: @font-family-base;
}
label,
input,
textarea,
button,
ul{
  font-family: @font-family-base;
  font-weight:100;
}

body {
  margin: 0 auto;
  background-color: #FF3D6A;
  color: #E7FF04;
  font-family: @font-family-sans-serif;
}

// ------------------------------
// ACTUAL EDITS
// ------------------------------
form
{
  width: @screen-phone;
  margin:0 auto;
  background-color: #FF0067;
  padding:10px;
  margin-bottom:10px;
  border-radius:8px;
  position: relative;
  p {
    margin: 0;
    padding: 0;
    position: relative;
  }
}

form .form-control
	{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
  padding-right:40px;

	box-shadow:none;
	margin-bottom:25px;
	transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	-o-transition:all .3s
	}
// ------------------------------
// FORM 1
// ------------------------------
.form1
{
  .form-control {
    &[data-input="name"]:required:invalid ~ .errormsg-list .msg--name {
      display: block;
    }
    &[data-input="email"]:required:invalid ~ .errormsg-list .msg--email {
      display: block;
    }
    &[data-input="subject"]:required:invalid ~ .errormsg-list .msg--subject {
      display: block;
    }
    &[data-input="message"]:required:invalid ~ .errormsg-list .msg--message {
      display: block;
    }
    &:required {

      &:valid {
        border-color:green;
        &+.boolean > .fa-check-circle-o{
          display:inline-block;
        }
      }

      &:invalid {
        border-color:red;
        &+.boolean > .fa-ban{
          display:inline-block;
        }
      }

    }
    // /.form-control
  }
  .row-fluid {
    margin-top:10px;
    text-align:right;

    button[type="submit"] {}
  }
}
// ------------------------------
// FORM 2
// ------------------------------
.form2 {
  .form-control {
    &[data-input="email"] .msg{
      color: green !important;
    }
    &:required {
      &:valid {
        border-color:green;
        &+.boolean > .fa-check-circle-o{
          display:inline-block;
        }

      }
      &:invalid {
        border-color:red;
        &+.boolean > .fa-ban{
          display:inline-block;
        }
      }
    }
  }
}
// ------------------------------
// ERROR MESSAGES
// ------------------------------
.errormsg {
  color: red;
  font-size: 10px;
}
.errormsg-list {
  margin:0;
  padding:0;
  .msg {
    background-color: #9CFF00;
    padding:3px 10px;
    border-radius:4px;
    color: #FF0067;
    margin-bottom: 1px;

    // make default
    display:none;
    &:last-child {
      margin-bottom:0;
    }
  }
}
.form-control {
  display:inline-block;
}
// ------------------------------
// BOOLEAN ICONS
// ------------------------------
.boolean {
  display:inline-block;
  position: absolute;
  margin-top:-56px;
  padding-right:20px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  right:13px;
  .bool {
    display: none;
  }
  .fa-check-circle-o {
    color: green;
  }
  .fa-ban {
    color:red;
  }


  textarea + & {
    background-color: none !important;
    border: none;
    margin-top: -60px;
    right: 3px;
  }
}
	<ul class="themeBox">
	<li title="#FF0067" style="background: #FF0067"></li>
	<li title="#FF3D6A" style="background: #FF3D6A"></li>
	<li title="#E7FF04" style="background: #E7FF04"></li>
	<li title="#9CFF00" style="background: #9CFF00"></li>
	<li title="#56FF00" style="background: #56FF00"></li>
	</ul>

	<div class="container">
	<h2>Form</h2>

	<form class="form1" role="form">
	<h3>Example 1</h3>
	<!--Full name-->
	<label for="name1">Full name<span class="required">*</span></label>
	<input class="form-control" type="text" name="name1" id="name1" placeholder="Enter your name" title="What is your name?" required data-input="name" />
	<span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
	<!--Email address-->
	<label for="email1">Email address<span class="required">*</span></label>
	<input class="form-control" type="email" name="email1" id="email1" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" placeholder="e.g. info@yourwebdomain.com" title="What mail should I reply to?" required data-input="email">
	<span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
	<!--Subject -->
	<label for="subject1">Subject<span class="required">*</span></label>
	<input class="form-control" type="text" name="subject1" id="subject1" placeholder="Give a subject" title="Make a witty subject" required data-input="subject">
	<span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
	<label for="message1">Message<span class="required">*</span></label>
	<textarea class="form-control" name="message1" rows="7" id="subject1" placeholder="What’s your story" title="Give me some attention!" required data-input="message"></textarea>
	<span class="boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>


	<ul class="errormsg-list">
	<li class="msg msg--name">Full name is required</li>
	<li class="msg msg--email">Your email is not valid</li>
	<li class="msg msg--subject">Think of a nice subject</li>
	<li class="msg msg--message">Tell me something you need</li>
	</ul>
	<div class="row-fluid">
	<button type="submit" class="btn btn-invert">Submit</button>
	</div>

	</form>



	<form class="form2">
	<h3>Example 2</h3>
	<label for="name2">Full name<span class="required">*</span></label>
	<div>
	<input class="form-control" type="text" name="name2" id="name2" placeholder="Enter your name" required data-input="name" />
	<span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
	</div>
	<label for="email2">Email address<span class="required">*</span></label>
	<div>
	<input class="form-control" type="email" name="email2" id="email2" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" placeholder="e.g. info@yourwebdomain.com" required data-input="email">
	<span class="input-group-addon boolean"><span class="bool fa fa-check-circle-o"></span><span class="bool fa fa-ban"></span></span>
	</div>
	</form>

	<ul class="errormsg-list">
	<li class="msg msg--name">Full name is required</li>
	<li class="msg msg--email">Your email is not valid</li>
	</ul>

	</div><!--/.container-->
	@import url('http://getbootstrap.com/dist/css/bootstrap.min.css');
	@import url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css');
	@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900,100italic,300italic,400italic,500italic,700italic,900italic\|Roboto+Condensed:300italic,400italic,700italic,400,300,700\|Roboto+Slab:400,100,300,700);
	[class*="fontawesome-"]:before {
	font-family: 'FontAwesome', sans-serif;
	}

	// ------------------------------
	// MIXINS
	// ------------------------------
	@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
	@font-family-base: 'Roboto Slab', @font-family-sans-serif;
	//== Media queries breakpoints
	//
	//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

	// Extra small screen / phone
	// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
	@screen-xs: 480px;
	@screen-xs-min: @screen-xs;
	@screen-phone: @screen-xs-min;

	// Small screen / tablet
	// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
	@screen-sm: 768px;
	@screen-sm-min: @screen-sm;
	@screen-tablet: @screen-sm-min;

	// Medium screen / desktop
	// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
	@screen-md: 992px;
	@screen-md-min: @screen-md;
	@screen-desktop: @screen-md-min;

	// Large screen / wide desktop
	// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
	@screen-lg: 1200px;
	@screen-lg-min: @screen-lg;
	@screen-lg-desktop: @screen-lg-min;

	// So media queries don't overlap when required, provide a maximum
	@screen-xs-max: (@screen-sm-min - 1);
	@screen-sm-max: (@screen-md-min - 1);
	@screen-md-max: (@screen-lg-min - 1);

	// ------------------------------
	// THEME COLORS
	// ------------------------------
	ul.themeBox {
	margin:0;
	padding:0;
	list-style:none;
	border-bottom:1px solid black;
	padding-bottom: 1px;
	> li {
	font-size:0;
	line-height:0;
	height:10px;
	display: inline-block;
	width:20%;
	float:left;
	}
	}
	// ------------------------------
	// TYPOGRAPHY
	// ------------------------------
	h1,h2,h3,h4,h5,h6 {
	font-family: @font-family-base;
	}
	label,
	input,
	textarea,
	button,
	ul{
	font-family: @font-family-base;
	font-weight:100;
	}

	body {
	margin: 0 auto;
	background-color: #FF3D6A;
	color: #E7FF04;
	font-family: @font-family-sans-serif;
	}

	// ------------------------------
	// ACTUAL EDITS
	// ------------------------------
	form
	{
	width: @screen-phone;
	margin:0 auto;
	background-color: #FF0067;
	padding:10px;
	margin-bottom:10px;
	border-radius:8px;
	position: relative;
	p {
	margin: 0;
	padding: 0;
	position: relative;
	}
	}

	form .form-control
	{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding-right:40px;

	box-shadow:none;
	margin-bottom:25px;
	transition:all .3s;
	-moz-transition:all .3s;
	-webkit-transition:all .3s;
	-o-transition:all .3s
	}
	// ------------------------------
	// FORM 1
	// ------------------------------
	.form1
	{
	.form-control {
	&[data-input="name"]:required:invalid ~ .errormsg-list .msg--name {
	display: block;
	}
	&[data-input="email"]:required:invalid ~ .errormsg-list .msg--email {
	display: block;
	}
	&[data-input="subject"]:required:invalid ~ .errormsg-list .msg--subject {
	display: block;
	}
	&[data-input="message"]:required:invalid ~ .errormsg-list .msg--message {
	display: block;
	}
	&:required {

	&:valid {
	border-color:green;
	&+.boolean > .fa-check-circle-o{
	display:inline-block;
	}
	}

	&:invalid {
	border-color:red;
	&+.boolean > .fa-ban{
	display:inline-block;
	}
	}

	}
	// /.form-control
	}
	.row-fluid {
	margin-top:10px;
	text-align:right;

	button[type="submit"] {}
	}
	}
	// ------------------------------
	// FORM 2
	// ------------------------------
	.form2 {
	.form-control {
	&[data-input="email"] .msg{
	color: green !important;
	}
	&:required {
	&:valid {
	border-color:green;
	&+.boolean > .fa-check-circle-o{
	display:inline-block;
	}

	}
	&:invalid {
	border-color:red;
	&+.boolean > .fa-ban{
	display:inline-block;
	}
	}
	}
	}
	}
	// ------------------------------
	// ERROR MESSAGES
	// ------------------------------
	.errormsg {
	color: red;
	font-size: 10px;
	}
	.errormsg-list {
	margin:0;
	padding:0;
	.msg {
	background-color: #9CFF00;
	padding:3px 10px;
	border-radius:4px;
	color: #FF0067;
	margin-bottom: 1px;

	// make default
	display:none;
	&:last-child {
	margin-bottom:0;
	}
	}
	}
	.form-control {
	display:inline-block;
	}
	// ------------------------------
	// BOOLEAN ICONS
	// ------------------------------
	.boolean {
	display:inline-block;
	position: absolute;
	margin-top:-56px;
	padding-right:20px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	right:13px;
	.bool {
	display: none;
	}
	.fa-check-circle-o {
	color: green;
	}
	.fa-ban {
	color:red;
	}


	textarea + & {
	background-color: none !important;
	border: none;
	margin-top: -60px;
	right: 3px;
	}
	}