【AngularJs学习】Form Validation

Form Validation

AngularJS offers client-side form validation.

AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state.

AngularJS also holds information about whether they have been touched, or modified, or not.

You can use standard HTML5 attributes to validate input, or you can make your own validation functions.

Client-side validation cannot alone secure user input. Server side validation is also necessary.

Form State and Input State

AngularJS is constantly updating the state of both the form and the input fields.

Input fields have the following states:

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted

They are all properties of the form, and are either true or false.

<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
<meta charset=UTF-8">
<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/app.css">
</head>
<body>
	<div class="container">
		<div class="navbar">
			<div class="navbar-inner">
				<ul class="nav">
					<li><a href="NewEvent.html">Create Event</a></li>
				</ul>
			</div>
		</div>
		<style>input.ng-invalid.ng-dirty {background-color: red}</style>
		<div ng-controller="EditEventController" style="padding-left:20px; padding-right:20px">
			<div class="container">
				<h1>New Event</h1>
				<hr/>
				<form name="newEventForm">
					<fieldset>
						<label for="eventName">Event Name</label>
						<input id="eventName" type="text" required ng-model="event.name" ng-blur="checkName(event.name)" ng-change="checkName(event.name)" placeholder="Name of your event..."/>
						<label for="eventDate">Event Date</label>
						<input id="eventDate" type="text" required ng-pattern="/\d\d/\d\d/\d\d\d\d/" ng-model="event.date" placeholder="format (mm/dd/yyyy)..."/>
						<label for="eventTime">Event Time</label>
						<input id="eventTime" type="text" ng-model="event.time" placeholder="Start and end time..."/>
						<label for="eventLocation">Event Location</label>
						<input id="eventLocation" type="text" ng-model="event.location.address" placeholder="Venue of event..."/>
						<br/>
						<input id="eventCity" type="text" ng-model="event.location.city" placeholder="City..."/>
						<input id="eventState" type="text" ng-model="event.location.state" placeholder="State..."/>
						
						<label for="eventImageUrl">Image:</label>
						<input id="eventImageUrl" type="text" ng-model="event.imageUrl"class="input-xlarge" placeholder="URL of Image"/>
					</fieldset>
					
					<img ng-src="{{event.imageUrl}}" >
					<br/>
					<br/>
					
					<button type="submit" ng-disabled="newEventForm.$invalid" ng-click="saveEvent(event, newEventForm)" class="btn btn-primary">Save</button>
					<button type="button" ng-click="cancelEdit()"class="btn btn-default">Cancel</button>
				</form>
			</div>
		</div>
	</div>
	<script src="lib/jquery-2.0.3.min.js"></script>
	<script src="lib/bootstrap.min.js"></script>
	<script src="lib/angular/angular.js"></script>
	<script src="js/app.js"></script>
	<script src="js/controllers/EventController.js"></script>
	<script src="js/controllers/EditEventController.js"></script>
	<script src="js/filters.js"></script>
</body>
</html>