JSFiddle - React, Tailwind, and code Playground

by Jacob Stamm

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://stamminator.github.io/angular-validate.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="PageModule" ng-controller="MainController" class="container">
  <br />
  <form method="post" name="mainForm" ng-submit="OnSubmit(mainForm)" ng-validate>
    <label>Email: <input type="text" name="Email" ng-model="Email" class="email" /></label><br />
    <p class="alert alert-danger" ng-show="!mainForm.validate()">Please correct any errors above before saving.</p>
    <button type="submit">Submit</button>
  </form>
</div>

JavaScript

var app = angular.module("PageModule", ['ngValidate'])

app.controller("MainController", function($scope) {
  $scope.Email = "";
	$scope.OnSubmit = function(form) {
  	if (form.$dirty) {
    	if (form.validate()) {
        //form submittal code
    	}
    }

    return false; // prevent normal form posting
  }
})