<commit_before><!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<meta name="descripion" content="Easy JS Form Validation - simple and reusable code to validate your form fields.">
	<meta name="keywords" content="Easy JS Form Validation, reusable Javascript form validation, jQuery form validation"/>
	<meta charset="utf-8" />

	<title>Easy JS Form Validation</title>
	
	<link href="dist/assets/css/styles.min.css" rel="stylesheet" type="text/css">

</head>


<body>
<!--================== Backups =================================================-->
<!--[if lte IE 9]>
	<div class="message" id="oldie">
		<p><i class="fa fa-exclamation-circle"></i>Sorry, but this website does not support IE9 or lower. Please <a href="http://windows.microsoft.com/ie">upgrade your IE</a> or <a href="http://www.browsehappy.com">switch to another browser</a>.</p>
	</div>
<![endif]-->

<!-- Opera Mini backup -->
	<div style="display:none;" class="message" id="operamini">
		<p><i class="fa fa-exclamation-circle"></i>Sorry, but this website does not support Opera Mini. Please switch to another browser such as Opera for Android, Chrome, Firefox, or Safari.</p>
	</div>

<!-- no JS backup -->
	<noscript>
	    <div class="message" id="nojs">
	    	<p class="text-center"><i class="fa fa-exclamation-circle"></i> Sorry, but you need JavaScript to enjoy full experience from this page. Please, enable JavaScript in your browser or switch to a JavaScript device.</p>
	    </div>
	</noscript>



<!--================== Header =================================================-->
	<header>

		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<div class="row-fluid clearfix">
		
				<!-- Logo -->
					<a class="navbar-brand" href="#" title="Easy JS Form Validation">
						<img width="80" height="70" class="hidden-xs" id="logo">
						<p class="inline-me">Easy-JS-Form-Validation</p>
					</a>
					
		    	<!-- Hamburger_btn for mobile -->
           		   	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav">
           		   		<i class="fa fa-bars"></i>
           		   	</button>
		
           		   	<div class="collapse navbar-collapse" id="mainNav" role="navigation">  
            	     	<ul class="nav navbar-nav navbar-right">
            	     		<li><a href="#demo" class="uppercase">Demo</a></li>
            	     		<li><a href="#getItNow" class="uppercase">Get-It-Now</a></li>
            	     		<li><a href="#howItWorks" class="uppercase">How-It-Works</a></li>
            	      	</ul>
            	    </div>
            	   </div>
            		
			</div>
		</nav>

    </header> <!-- header ends -->



<!--================== Main =================================================-->
		<div class="container-fluid">

			<main class="row">
				
			<!-- Demo -->	
				<section id="demo">
					<h1 class="text-center">Demo</h1>

					<form class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-4 m-tb-1-3">
						<div class="form-group">
  						  	<label for="name">Name:</label>
  						  	<input type="text" class="form-control" name="name" data="easyValidation" required>
  						  	<div></div>
  						</div>

  						<div class="form-group">
  						  	<label for="email">Email:</label>
  						  	<input type="email" class="form-control" name="email" data="easyValidation" required>
  						  	<div></div>
  						</div>

  						<div class="form-group">
  						  	<label for="url">Url:</label>
  						  	<input type="text" class="form-control" name="url" data="easyValidation" required>
  						  	<div></div>
  						</div>

  						<div class="form-group">
  						  	<label for="phone">Phone:</label>
  						  	<input type="text" class="form-control" name="phone" data="easyValidation" required>
  						  	<div></div>
  						</div>

  						<div class="checkbox">
  						  	<label for="checkbox"></label>
  						    	<input type="checkbox" name="checkbox" data="easyValidation" required> Checkbox
  						  	<div></div>
  						</div>

  						<div class="form-group">
  						  	<label for="comment">Textarea:</label>
  						  	<textarea type="text" class="form-control" name="comment" data="easyValidation" rows="4" required></textarea>
  						  	<div></div>
  						</div>

  						<button type="submit" class="third-button">Send</button>
					</form>
					
				</section>

			<!-- Get-it-now -->	
				<section class="col-xs-12 bg-dark" id="getItNow">
					<h1 class="text-center text-white">Get It Now</h1>
					
					<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3 text-center">
						<p class="intro text-white">Easy-JS-Form-Validation is really ..emm easy(!) to use and re-use.
						<br>
						Please check <a href="#howItWorks" class="inline-me"><b>HOW-IT-WORKS</b></a> section for a simple steps to make it all work.
						</p>
					</div>

					<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3 text-center m-tb-1-3">
						<a href="https://github.com/Olga--Smirnova/Easy_JS_Form_Validation" class="main-button inline-me" title="View on GitHub">View on GitHub</a>

						<a href="http://localhost/Easy_JS_Form_Validation/easy-js-form-validation.zip" class="sec-button inline-me">Download</a>
					</div>
				</section>

			<!-- How-it-works -->	
				<section class="col-xs-12" id="howItWorks">
					<h1 class="text-center">How It Works</h1>

					<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3 text-center m-tb-1-3">
					<!-- HTML instructions -->		
						<p class="text-left">HTML structure for an input field can look something as below. The only required element for HTML structure is an empty <b>&lt;div&gt;&lt;/div&gt;</b> after each input field. This is where the validation message appears if the validation failed. And don't forget to add <b>&lt;data="easyValidation"&gt;</b> to each of your input fields.</p>
						<h3>HTML</h3>
						<pre class="code text-left">	<commit_msg>html is ready<commit_after><!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<meta name="descripion" content="Easy JS Form Validation - simple and reusable code to validate your form fields on client side.">
	<meta name="keywords" content="Easy JS Form Validation, reusable Javascript form validation, jQuery form validation"/>
	<meta charset="utf-8" />

	<title>Easy JS Form Validation</title>
	
	<link href="dist/assets/css/styles.min.css" rel="stylesheet" type="text/css">

</head>


<body>
<!--================== Backups =================================================-->
<!--[if lte IE 9]>
	<div class="message" id="oldie">
		<p><i class="fa fa-exclamation-circle"></i>Sorry, but this website does not support IE9 or lower. Please <a href="http://windows.microsoft.com/ie">upgrade your IE</a> or <a href="http://www.browsehappy.com">switch to another browser</a>.</p>
	</div>
<![endif]-->

<!-- Opera Mini backup -->
	<div style="display:none;" class="message" id="operamini">
		<p><i class="fa fa-exclamation-circle"></i>Sorry, but this website does not support Opera Mini. Please switch to another browser such as Opera for Android, Chrome, Firefox, or Safari.</p>
	</div>

<!-- no JS backup -->
	<noscript>
	    <div class="message" id="nojs">
	    	<p class="text-center"><i class="fa fa-exclamation-circle"></i> Sorry, but you need JavaScript to enjoy full experience from this page. Please, enable JavaScript in your browser or switch to a JavaScript device.</p>
	    </div>
	</noscript>



<!--================== Header =================================================-->
	<header>

		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<div class="row-fluid clearfix">
		
				<!-- Logo -->
					<a class="navbar-brand" href="#" title="Easy JS Form Validation">
						<img width="80" height="70" class="hidden-xs" id="logo">
						<p class="inline-me">Easy-JS-Form-Validation</p>
					</a>
					
		    	<!-- Hamburger_btn for mobile -->
           		   	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav">
           		   		<i class="fa fa-bars"></i>
           		   	</button>
		
           		   	<div class="collapse navbar-collapse" id="mainNav" role="navigation">  
            	     	<ul class="nav navbar-nav navbar-right">
            	     		<li><a href="#demo" class="uppercase">Demo</a></li>
            	     		<li><a href="#getItNow" class="uppercase">Get-It-Now</a></li>
            	     		<li><a href="#howItWorks" class="uppercase">How-It-Works</a></li>
            	      	</ul>
            	    </div>
            	   </div>
            		
			</div>
		</nav>

    </header> <!-- header ends -->



<!--================== Main =================================================-->
		<div class="container-fluid">

			<main class="row">
				
			<!-- Demo -->	
				<section id="demo">
					<h1 class="text-center">Demo</h1>

					<form class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-4 m-tb-1-3">
						<div class="form-group">
  						  	<label for="name">Name:</label>
  						  	<input type="text" class="form-control" name="name" data="easyValidation" required>
  						  	<div></div>
  						</div>

  						<div class="form-group">
  						  	<label for="email">Email:</label>
  						  	<input type="email" class="form-control" name="email" data="easyValidation" required>
  						  	<div></div>
  						</div>

  						<div class="form-group">
  						  	<label for="url">Url:</label>
  						  	<input type="text" class="form-control" name="url" data="easyValidation" required>
  						  	<div></div>
  						</div>

  						<div class="form-group">
  						  	<label for="phone">Phone:</label>
  						  	<input type="text" class="form-control" name="phone" data="easyValidation" required>
  						  	<div></div>
  						</div>

  						<div class="checkbox">
  						  	<label for="checkbox"></label>
  						    	<input type="checkbox" name="checkbox" data="easyValidation" required> Checkbox
  						  	<div></div>
  						</div>

  						<div class="form-group">
  						  	<label for="comment">Textarea:</label>
  						  	<textarea type="text" class="form-control" name="comment" data="easyValidation" rows="4" required></textarea>
  						  	<div></div>
  						</div>

  						<button type="submit" class="third-button">Send</button>
					</form>
					
				</section>

			<!-- Get-it-now -->	
				<section class="col-xs-12 bg-dark" id="getItNow">
					<h1 class="text-center text-white">Get It Now</h1>
					
					<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3 text-center">
						<p class="intro text-white">Simple client side validation for your form which is really easy to use and re-use.
						<br>
						Please check <a href="#howItWorks" class="inline-me"><b>HOW-IT-WORKS</b></a> section for a couple of steps to make it all work. jQuery is required.
						</p>
					</div>

					<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3 text-center m-tb-1-3">
						<a href="https://github.com/Olga--Smirnova/Easy_JS_Form_Validation" class="main-button inline-me" title="View on GitHub">View on GitHub</a>

						<a href="http://localhost/Easy_JS_Form_Validation/easy-js-form-validation.zip" class="sec-button inline-me">Download</a>
					</div>
				</section>

			<!-- How-it-works -->	
				<section class="col-xs-12" id="howItWorks">
					<h1 class="text-center">How It Works</h1>

					<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3 text-center m-tb-1-3">
					<!-- HTML instructions -->		
						<p class="text-left">HTML structure for an input field can look something as below. The only required element for HTML structure is an empty <b>&lt;div&gt;&lt;/div&gt;</b> after each input field. This is where the validation message appears if the validation failed. And don't forget to add <b>&lt;data="easyValidation"&gt;</b> to each of your input fields.</p>
						<h3>HTML</h3>
						<pre class="code text-left">	
{'fraction_non_alphanumeric': 0.21174701179450645, 'fraction_numerical': 0.00981556241589488, 'mean_word_length': 2.8377885783718106, 'pattern_counts': {'":': 0, '<': 365, '<?xml version=': 0, '>': 363, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7672317', 'n_tokens_mistral': 4920, 'n_tokens_neox': 4068, 'n_words': 981}