diff --git a/README.md b/README.md index 3fc92f2..87e4950 100755 --- a/README.md +++ b/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/) diff --git a/index.html b/index.html index d75f92a..3cf78e9 100755 --- a/index.html +++ b/index.html @@ -45,12 +45,12 @@

Minimal Form Interface Simplistic, single input view form

  • - - + +
  • - +
  • diff --git a/js/stepsForm.js b/js/stepsForm.js index bf4dd7a..e48f13d 100644 --- a/js/stepsForm.js +++ b/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 = '';