current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I am trying to show a Validation Summary, a Div on top of the page with all the Validation error messages in angularjs, on form submit. I am using the below logic to show/ hide the top div with validation messages,

<div class="alert alert-error" ng-show="submitted && myForm.$invalid">
</div>

I am setting the variable submitted to true on save button click. It's working Okay the first time, but after the first submission, if enter the value for the input field(required field) and clear it, it's kicking off the validation(the top div shows).

Is there a way to show the validation div, only on the submit of the form and not when the user clears the input field ?

UPDATE

$scope.save = function (myForm) {

    $scope.submitted = true;

    if (myForm.$invalid) {
        return;
    }

    $scope.submitted = false;
}

Thanks !

share|improve this question
up vote 0 down vote accepted

Hmm one way to do it would be to watch the FormController's property $dirty and $setPristine() method, and use a variable hasError to show the error or not.

See this plunker as an example

JAVASCRIPT

controller('AppController', ['$scope', function($scope) {

  $scope.hasError = false;

  $scope.$watch('theForm.$dirty', function() {
    $scope.hasError = false;
    $scope.theForm.$setPristine();
  });

  $scope.save = function() {
    $scope.hasError = $scope.theForm.$invalid;

    if($scope.hasError) {
      // perform error routine
    } else {
     // perform save routine
    }
  };

}]);

HTML

   <body ng-controller="AppController">

    <div class="error" ng-show="hasError">This is an error</div>

    <form name="theForm" ng-submit="save()" novalidate>
      <input type="text" name="text1" ng-model="text1" required>
      <input type="text" name="text2" ng-model="text2" required>
      <button type="submit">Submit</button>
    </form>

  </body>
share|improve this answer
up vote 0 down vote

Make sure you are setting submitted to false upon display of your validation div else it'll show up after each additional validation call.

    $scope.save = function (myForm) {

        $scope.submitted = true;

            if (myForm.$invalid) {
                    $scope.submitted = false;
                    return;
            }
    }
share|improve this answer
    
I set $scope.submitted = false; inside the save method. Please see my update – user636525 Apr 14 '14 at 2:26
    
Won't the return cause it to bounce out of the save function before it ever hits the line to set it to false? I'd place the $scope.submitted = false; within the conditional right above the return statement. – Darren Apr 14 '14 at 2:34
    
we cannot do that, the moment you set $scope.submitted = false; the ng-show="submitted && myForm.$invalid" kicks in and hides the Div ! – user636525 Apr 14 '14 at 2:41
1  
Doh! Rookie mistake. Right, so what you want to do is set $scope.submitted = false; within the dismissal of your div. That way, once the user excuses the dialogue they won't bounce it back up until they submit the form again. – Darren Apr 14 '14 at 3:26

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.