Add Email validation, and make some validation optional

README.md

@@ -3,6 +3,10 @@ Minimal Form Interface
 
 A simplistic form with inputs shown one at a time. Inspired by the form seen on the end of the [PageLanes website](http://www.pagelanes.com/).
 
+For email validation add `data-validate="email"` to the input field.
+
+If you need to skip validation for a field, add `data-validate="none"` to the input field.
+
 [Article on Codrops](http://tympanus.net/codrops/?p=18780)
 
 [Demo](http://tympanus.net/Development/MinimalForm/)

index.html

@@ -45,12 +45,12 @@ <h1>Minimal Form Interface <span>Simplistic, single input view form</span></h1>
 								<input id="q4" name="q4" type="text"/>
 							</li>
 							<li>
-								<span><label for="q5">What book inspires you?</label></span>
-								<input id="q5" name="q5" type="text"/>
+								<span><label for="q5">What is your email address?</label></span>
+								<input id="q5" name="q5" type="text" data-validate="email"/>
 							</li>
 							<li>
 								<span><label for="q6">What's your profession?</label></span>
-								<input id="q6" name="q6" type="text"/>
+								<input id="q6" name="q6" type="text" data-validate="none"/>
 							</li>
 						</ol><!-- /questions -->
 						<button class="submit" type="submit">Send answers</button>

js/stepsForm.js

@@ -115,7 +115,7 @@
 	};
 
 	stepsForm.prototype._nextQuestion = function() {
-		if( !this._validade() ) {
+		if( !this._validate() ) {
 			return false;
 		}
 
@@ -198,17 +198,38 @@
 
 	// TODO (next version..)
 	// the validation function
-	stepsForm.prototype._validade = function() {
+	stepsForm.prototype._validate = function() {
 		// current question´s input
-		var input = this.questions[ this.current ].querySelector( 'input' ).value;
-		if( input === '' ) {
-			this._showError( 'EMPTYSTR' );
-			return false;
+		var input = this.questions[ this.current ].querySelector( 'input' );
+
+		if (input.hasAttribute('data-validate')) {
+			switch (input.getAttribute('data-validate')) {
+				case 'none' :
+					// there's no validation in this field, moving on
+					break;
+				case 'email' :
+					if (!this._validateEmail(input.value)) {
+						this._showError( 'INVALIDEMAIL' );
+						return false;
+					}
+					break;
+			}
+		} else {
+			if( input.value === '' ) {
+				this._showError( 'EMPTYSTR' );
+				return false;
+			}
 		}
 
 		return true;
 	}
 
+	// email validation
+	stepsForm.prototype._validateEmail = function( email ) {
+		var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+		return regex.test(email);
+	}
+
 	// TODO (next version..)
 	stepsForm.prototype._showError = function( err ) {
 		var message = '';