CODEWITHSUNDEEP
javascriptangularjs
V Jayanth Reddy
V Jayanth Reddy

Reputation: 101

Loading image after form validation succedded

I want to display an image when all the elements in a form passes the validation i.e. the whole form is valid.

Defining image:

<div id="c3" ng-hide="myvalue" class="ng-hide" >
    <img src="D:/AngularJS/images/Assets/compleated .png"/>
</div>

Declaring form and validating:

<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
    <label>Name</label>
    <input type="text" name="name" class="form-control" ng-model="user.name" required>
    <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
</div>

<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
    <label>Username</label>
    <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
    <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
    <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>

<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email" >
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
</div>
</form>

Angular Script:

validationApp.controller('mainController', function($scope) {
    // function to submit the form after all validation has occurred    
    $scope.myvalue=true;
    $scope.submitForm = function() {
        // check to make sure the form is completely valid
        if ($scope.userForm.$valid) {
            $scope.myvalue=false;
        }
    };
});

Upvotes: 1

Views: 451

Answers (2)

Michael Kang
Michael Kang

Reputation: 52847

 var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

    <form name="form"> 
        Name*<input type="text" ng-model="name" name="name" required />
    </form>
    <img ng-show="form.name.$valid" ng-src="http://i.huffpost.com/gen/1068997/images/o-JASON-PRIESTLEY-facebook.jpg" /> 
</div>

This works:

<form name="form"> 
    <input type="text" ng-model="name" name="name" required />
</form>
<img ng-show="form.name.$valid" ng-src="http://i.huffpost.com/gen/1068997/images/o-JASON-PRIESTLEY-facebook.jpg" />

Upvotes: 2

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

You can do like this by using ng-show on the image checking if the form is valid or not by userForm.$valid (You don't need a controller at all for this to achieve):

<form name="userForm">
    <img src="http://myimage.png" ng-show="userForm.$valid" />

    <!-- Your elements -->
</form>

See the working code below. When all your validation like all fields are required, proper email and length criteria in username are correct then you will see a image at the top i.e. when your form is valid.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form name="userForm" class="container" ng-app>
  <img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-10-512.png" ng-show="userForm.$valid" width="100px" />
       
  <!-- NAME -->
  <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
    <label>Name</label>
    <input type="text" name="name" class="form-control" ng-model="user.name" required>
    <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
  </div>

  <!-- USERNAME -->
  <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
    <label>Username</label>
    <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
    <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
    <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
  </div>

  <!-- EMAIL -->
  <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email" required>
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
  </div>
</form>

Upvotes: 1

Related Questions