Form Validation in AngularJS, AngularJS Form Validation with Example

<!DOCTYPE html>
<html>
	<head>
    	<title> AngularJS Form Validation</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<h2>AngularJS Sample Application</h2>
	<div ng-app="mainApp" ng-controller="webDetails">
	 
	<form name="websiteDetails" novalidate>
	<table border="0">
	   <tr>
		  <td>Enter website name</td>
		  <td><input name="websiteName" type="text" ng-model="websiteName" class="custom_form" required>
			 <span style = "color:red" ng-show = "websiteDetails.websiteName.$dirty && websiteDetails.websiteName.$invalid">
				<span ng-show = "websiteDetails.websiteName.$error.required">First Name is required.</span>
			 </span>
		  </td>
	   </tr>
	   
	   <tr>
		  <td>Enter website URL</td>
		  <td><input name="websiteURL"  type="text" ng-model="websiteURL" class="custom_form" required>
			 <span style="color:red" ng-show="websiteDetails.websiteURL.$dirty && websiteDetails.websiteURL.$invalid">
				<span ng-show = "websiteDetails.websiteURL.$error.required">Last Name is required.</span>
			 </span>
		  </td>
	   </tr>
	   
	   <tr>
		  <td>Enter Email ID</td><td><input name="email" type="email" ng-model="email" length="150" class="custom_form" required>
			 <span style = "color:red" ng-show = "websiteDetails.email.$dirty && websiteDetails.email.$invalid">
				<span ng-show = "websiteDetails.email.$error.required">Email is required.</span>
				<span ng-show = "websiteDetails.email.$error.email">Invalid email address.</span>
			 </span>
		  </td>
	   </tr>
	   
	   <tr>
		  <td> </td>
		  <td>
			 <button ng-disabled="websiteDetails.websiteName.$dirty &&
				websiteDetails.websiteName.$invalid || websiteDetails.websiteURL.$dirty &&
				websiteDetails.websiteURL.$invalid || websiteDetails.email.$dirty &&
				websiteDetails.email.$invalid" ng-click="submit()" class="custom_btn">Submit</button>
				<button ng-click="reset()" class="custom_btn">Reset</button>
		  </td>
	   </tr>

</table>
	</form>
	</div>

Output :

Topic : AngularJS Form Validation