Hello all,
We usually validate our HTML form before submitting it as it's a good practice to do that and to validate the HTML form we can use JavaScript Validation in client side, or we can also use custom JQuery code where we can apply different type logics and Regex to validate the form.
HTML5 also comes with many inbuilt validation feature such as for Email and Number input type validations.
AngularJS also comes with some inbuilt validation feature which we can use while working with it.
As an example we have following code packet which demonstrate the Validation feature of AngularJS :
<body ng-app="myApp">
<div class="container signInMainDiv">
<div class="table-responsive form-group">
<div ng-controller="AddUserController">
<form name="htmlForm" id="htmlForm" role="form" style="border:none; box-shadow:none;" ng-submit="htmlForm.$valid && addFormDetails(formDetails)">
<div style="width:60%; margin:0 auto; padding-bottom:25px;">
<h4> Add New User Here</h4>
</div>
<table class="table" style="width:60%; margin:0 auto;">
<tr>
<td>First Name
<td><input type="text" name="txtFirstName" id="txtFirstName" class="form-control" ng-model="formDetails.firstName" required /></td>
</tr>
<tr>
<td>Last Name
<td><input type="text" name="txtLastName" id="txtLastName" class="form-control" ng-model="formDetails.lastName" required /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="email" name="txtEmail" id="txtEmail" class="form-control" ng-model="formDetails.email" required /></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="number" name="txtNumber" id="txtNumber" class="form-control" min="0" ng-model="formDetails.phoneNumber" required />
</tr>
<tr>
<td colspan="2">
<button type="submit" name="btnSave" id="btnSave" class="form-control btn-success" style="width:130px; float:left;"><span class="glyphicon glyphicon-user"></span> Add User</button>
</td>
</tr>
</table>
<h3>Form is valid = htmlForm.$valid </h3>
</form>
<div>
</div>
</div>
</div>
</body>
Here firstly we are turning off the Default HTML validation by putting novalidate attribute on form tag like this:
<form id="htmlForm" ng-controller="formController" ng-submit="submitForm(formDetails)" novalidate>
...
...
...
<form>
After this, we will put required attribute in all the controls inside the HTML form like this:
<textarea name="txtAddress" ng-model="formDetails.address" required></textarea>
To check whether the form is valid or not , we can use $valid which will return true from valid form and false for invalid form.
<h3>Form is valid = {{htmlForm.$valid}} </h3>
0 Comment(s)