I have a form in which I have some input fields. Some of them are required fields and some are email fields.
I am using HTML5 required attribute for required fields and type="email" attribute for email fields.
My question is after clicking on submit button i have to show red border for all the invalid fields.
This is my form:
<form name="addRelation">
<label>First Name</label>
<input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$error.required">first Name is required</span><br/>
<label>Last Name</label>
<input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$error.required">Last Name is required</span><br/>
<label>Email</label>
<input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
<input class="btn" data-ng-click="save(model)" type="button" value="SAVE" />
</form>
and my save function.
$scope.save= function (model) {
if ($scope.addRelation.$valid) {
//form is valid- so save it to DB
}
else {
//if form is not valid set $scope.addRelation.submitted to true
$scope.addRelation.submitted=true;
}
};
})
Now, when i click on save button without filling anything all the errors(spans) are getting displayed. But i want to show red border for all the invalid fields.
I have tried following cases:
input.ng-dirty.ng-invalid{border:1px solid black;}
but this fails when a user click on submit button directly.(without touching input fields)
input.ng-invalid{border:1px solid black;}
this shows the red border as soon as user opens a signup form.
Please help.
This question is related to
forms
validation
angularjs
I have created a working CodePen example to demonstrate how you might accomplish your goals.
I added ng-click
to the <form>
and removed the logic from your button:
<form name="addRelation" data-ng-click="save(model)">
...
<input class="btn" type="submit" value="SAVE" />
Here's the updated template:
<section ng-app="app" ng-controller="MainCtrl">
<form class="well" name="addRelation" data-ng-click="save(model)">
<label>First Name</label>
<input type="text" placeholder="First Name" data-ng-model="model.firstName" id="FirstName" name="FirstName" required/><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.FirstName.$invalid">First Name is required</span><br/>
<label>Last Name</label>
<input type="text" placeholder="Last Name" data-ng-model="model.lastName" id="LastName" name="LastName" required/><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.LastName.$invalid">Last Name is required</span><br/>
<label>Email</label>
<input type="email" placeholder="Email" data-ng-model="model.email" id="Email" name="Email" required/><br/>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.required">Email address is required</span>
<span class="text-error" data-ng-show="addRelation.submitted && addRelation.Email.$error.email">Email address is not valid</span><br/>
<input class="btn" type="submit" value="SAVE" />
</form>
</section>
and controller code:
app.controller('MainCtrl', function($scope) {
$scope.save = function(model) {
$scope.addRelation.submitted = true;
if($scope.addRelation.$valid) {
// submit to db
console.log(model);
} else {
console.log('Errors in form data');
}
};
});
I hope this helps.
you can use default ng-submitted is set if the form was submitted.
https://docs.angularjs.org/api/ng/directive/form
example: http://jsbin.com/cowufugusu/1/
Source: Stackoverflow.com