CODEWITHSUNDEEP
javascripthtmlcssangularjs
Shristi S.Chavhan
Shristi S.Chavhan

Reputation: 55

In angular form span can not be displayed

I am not able to see error message on clicking the submit button using angularjs. Any lead will be appreciated Thanks in advance :)

<form id="formbody" ng-submit="submituser(form)" name="form" novalidate>

    <input type="text" ng-class="{ errorinput: submitted && form.dob.$invalid }" name="dob" ng-model="dob" placeholder="Date of Birth" required />
    <span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>

    <div style="padding-left: 275px;">
        <button type="submit">Submit</button>
        <!--  <div  type="button" id="btn" style="color: red;" >Submit</div> -->
    </div>
    </div>
</form>

.controller('ExampleController', function($scope, $location, $scope, $stateParams) {
    $scope.singleSelect = '';
    $scope.goToPage = function() {
        console.log("selectservice");
        $location.path("/selectservice");
    }
    $scope.submituser = function($scope) {
        if ($scope.form.$valid) {} else {
            $scope.submitted = true;
        }
    }
})

Upvotes: 0

Views: 573

Answers (4)

Rajath M S
Rajath M S

Reputation: 1092

please check the form name

you have used two different names

name ="form" in form tag and used as signUpForm.dob in input field.

Check your ng-model to

<form id="formbody"  ng-submit="submituser(form)" name="signUpForm" novalidate>

 <input type="text" ng-class="{ errorinput: submitted && signUpForm.dob.$invalid }" name="dob" ng-model="form.dob" placeholder="Date of Birth" required />
    <span class="e" ng-if="submitted && signUpForm.dob.$invalid">Please provide a valid date of birth</span>

  <div style="padding-left: 275px;">
   <button type="submit">Submit</button>
</div>
</div>
    </form>


.controller('ExampleController',function($scope,$location,$scope, $stateParams){
     $scope.singleSelect='';

     $scope.goToPage=function(){
        console.log("selectservice");
        $location.path("/selectservice");
     }
     $scope.submitted =false;

     $scope.submituser = function(form){
      // console.log(form);
             if (form.$valid) {
           your logic 
    } else {
      $scope.submitted = true;
    }
  }

    })

Upvotes: 1

MMK
MMK

Reputation: 3721

Try something like that

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" ng-app>
<div class="control-group" ng-class="{true: 'error'}[submitted && form.dob.$invalid]">
        <label class="control-label" for="dob">Your Date of Birth</label>
        <div class="controls">
            <input type="text" name="dob" ng-model="dob" required />
            <span class="help-inline"  ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>
          
        </div>
    </div>
   
    <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>

Upvotes: 0

korteee
korteee

Reputation: 2682

You have to provide the form name but even after that you cannot refer to your form in controller unless you pass it through the submit function arguments. Also there is not signupForm() function in your controller.

The way to go is :

<form id="formbody" name="myForm"  ng-submit="signupForm(myForm)" novalidate>
<!-- inputs etc -->
</form>

Then based on submituser():

$scope.signupForm = function(myForm) {
        //Do whatever you want to do
        if(myForm.$valid) {
            //some logic
        }else {
            $scope.submitted = true;
        }
    }

On the other hand if you don't want to mess up with the controller you can always use FormController method $submitted. This would look like:

<span class="e" ng-show="myForm.$submitted && myForm.dob.$invalid">Please provide a valid date of birth</span>

Upvotes: 0

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

change ng-show of span to

 <span class="e" ng-show="submitted && form.dob.$invalid">Please provide a valid date of birth</span>

Upvotes: 1

Related Questions