4

I'm using ngMessages to display error messages with my form validation and this is working.

Now my problem is when I submit the form I want to change the classes from being valid (green border) to their normal state, which is just css on the inputs. Also if all the fields are valid a text message should display above the form that the form has been sent but it doesn't seem to be working with the $valid.

After a few seconds the message disappears.

Plunker

my code

css

input {
    background-color: #fff;
    border: 1px solid darkgray;
    margin-top: 20px;
    width: 400px;
    height: 45px;
    padding: 0 10px;

}
.invalid-field {
    border: 1px solid red;
}
.valid-field {
    border: 1px solid green;
}
.error {
    color: red;
}
.sent {
    color: green;   
}

html/angular

<form novalidate name="contactForm">
    <div ng-messages="contactForm.$valid" ng-if="contactForm.$submitted">
        <div ng-message="valid">
            <span class="sent">Your message has been sent!</span>
        </div>
    </div>

    <input ng-class="{'invalid-field': contactForm.nameField.$touched || contactForm.$submitted, 'valid-field': contactForm.nameField.$valid}" 
        type="text" name="nameField" placeholder="Full name*"
        ng-model="contactName"
        minlength="2"
        required >
    <div ng-messages="contactForm.nameField.$error" ng-if="contactForm.$submitted || contactForm.nameField.$touched">
        <div ng-message="required">
            <span class="error">Name is required</span>
        </div>
        <div ng-message="minlength">
            <span class="error">Name must be 2 characters long</span>
        </div>
    </div>

    <input ng-class="{'invalid-field': contactForm.emailField.$touched || contactForm.$submitted, 'valid-field': contactForm.emailField.$valid}"
        type="email" name="emailField" placeholder="Email*"
        ng-model="contactEmail"
        required>
    <div ng-messages="contactForm.emailField.$error" ng-if="contactForm.$submitted || contactForm.emailField.$touched">
        <div ng-message="required"><span class="error">Email is required</span></div>
        <div ng-message="email"><span class="error">Email is not valid</span></div>
    </div>

    <button class="send-btn" type="submit">Send form</button>
</form>
Improve this question
2
  • make a plunker. it would be very helpful for you and for us too. Commented Apr 30, 2015 at 13:33
  • I will edit my question with a plunker in a minute. Commented Apr 30, 2015 at 13:38

2 Answers 2

Reset to default
1

Update

I'm afraid that you can't do what you need directly, because if you change the conditional there are 2 states which will conflict with each other:

The user fills the form correctly and submits VS The user press Submit, then fills a field correctly

In the second case the field won't be show the valid-field green border.

What you should do is make a function which checks the valid fields, and execute it on the submit, then set a flag on true for a class global on your form which will override your current valid/invalid states

Here is the working solution

//Validate States
$scope.validateSuccessSubmit = function(){
      if($scope.contactForm.nameField.$valid && 
        $scope.contactForm.emailField.$valid &&
          $scope.contactForm.$submitted) {
            $scope.formCompleted = true;
          }

    };

<!-- Form -->
    <form novalidate name="contactForm" ng-class="{'form-completed' : formCompleted}">

/*CSS*/
.form-completed input{
  border: 1px solid darkgray;
}

Previous incorrect answer:

Just add the !$submitted condition on the valid-field class

ng-class="{'invalid-field': contactForm.nameField.$touched || contactForm.$submitted, 
'valid-field': contactForm.nameField.$valid && !contactForm.$submitted}" 

//And 

ng-class="{'invalid-field': contactForm.emailField.$touched || contactForm.$submitted,
 'valid-field': contactForm.emailField.$valid  && !contactForm.$submitted}"

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

when i added this to my plunker the borders went from green to red
Sorry i'l fix the answer
0

Use the following code it will work fine but what you need to is write css class like:

    .initial
   {
     1px solid darkgray;  
   }

and use the following html for ng-class of you input elements.

 ng-class="{'invalid-field': contactForm.nameField.$touched && !contactForm.nameField.$valid, 
 'valid-field': contactForm.nameField.$valid&& !contactForm.$submitted , 
   'initial':contactForm.nameField.$valid && contactForm.$submitted}" 

  ng-class="{'invalid-field': contactForm.emailField.$touched && !contactForm.emailField.$valid,
  'valid-field': contactForm.emailField.$valid && !contactForm.$submitted , 
   'initial':contactForm.emailField.$valid && contactForm.$submitted}"

And finally I for the "Your message has been sent!" message you need to write 

     <div ng-messages="contactForm.$valid" ng-if="contactForm.$submitted && contactForm.$valid">

       <span class="sent">Your message has been sent!</span>

   </div>
Improve this answer

2 Comments

I was verified and it is working fine. but one thing you should know that is there any <div ng-message="valid">.
This solution has a defect, If the user press submit, without entering anything, then fill the fields correctly, the green border won't be shown

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.