current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

I want to set input field to ng-invalid if a user clicks submit and the form fields are empty using AngularJS. I know a directive can be used to custom form validation and using $setValidity to manually set the input field but I'm not sure I need a directive to just highlight the empty/required fields on submit. Any help would be greatly appreciated. Thank you.

Here is the code I am working with: HTML

<form name="SignUpForm ng-submit="submitUser()" novalidate>
<input type="text" name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="error" ng-show="signUpForm.dob.$dirty && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<input type="text" name="email" ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/" placeholder="Email" required />
<span class="error" ng-show="signUpForm.email.$dirty && signUpForm.email.$invalid">Please provide a valid email address</span>
<button type="submit">Submit</submit>
</form>

SASS/CSS

input {
&.ng-valid.ng-dirty {
color: #fff;
background-color: rgba(146, 253, 156, 0.5);
border-color: #92fd9c;
box-shadow: inset 2px 2px 2px #92fd9c;
}
&.ng-invalid.ng-dirty {
color: #850000;
background: rgba(254, 186, 186, 0.5);
border: 1px solid #850000;
}

AngularJS

$scope.submitUser = function() {
if ($scope.signUpForm.$valid) {
// Set form values & construct data to send
} else {
$scope.response = "Please fill in the required fields";
}
share|improve this question

1 Answer 1

up vote 5 down vote accepted

I'm not sure I completely follow, but does this do what you want?

Plunker:

http://plnkr.co/edit/L5qzEJRKkdGogsE7IzAr?p=preview

HTML:

<form name="signUpForm" ng-submit="submitUser()" novalidate>
<input type="text" ng-class="{ errorinput: submitted && signUpForm.dob.$invalid }" name="dob" ng-model="dob" placeholder="Date of Birth" required />
<span class="e" ng-show="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span>
<br>
<input type="text" name="email" ng-class="{ errorinput: submitted && signUpForm.email.$invalid }" ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/" placeholder="Email" required />
<span class="e" ng-show="submitted && signUpForm.email.$invalid">Please provide a valid email address</span>
<br>
<button type="submit">Submit</button>
</form>

Javascript:

$scope.submitUser = function() {
  if ($scope.signUpForm.$valid) {

  } else {
    $scope.submitted = true;
  }
}
share|improve this answer
3  
This is exactly what I was looking for, thank you. –  user1739664 Mar 2 '14 at 13:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.