Reputation: 977

Contact form validation submit not working using angular js

I'm doing contact form here all name, email, phone number validations are working fine. but when I click to submit button alert is not working here I use ngMessage directive for validation.I just start learning angularjs.So, Is there any other alternate way for validation which is simple and have less code.

Help will be appreciated..

this is my code.

var app = angular.module('myApp', ['ngMessages']);


app.controller('nameController', function ($scope) {
  
  $scope.submitForm = function() {
    alert('Form submitted');
    
  };
  
});

body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
  width: 50%;
  margin: 0 auto;
  padding: 20px 20px 20px 20px;
  color: #444444;
  background: #4cb0db;
}
.formbg label {
  display: block;
  margin: 0px 0px 5px;
}
.formbg input[type="text"], 
.formbg  input[type="email"], 
.formbg input[type="number"] {
  width: 60%;
  padding: 0px 0px 0px 5px;
  border: 1px solid #C5E2FF;
  height: 30px;
  line-height:15px;
  margin: 2px 6px 16px 0px;
  border: 1px solid #C5E2FF;
  background: #FBFBFB;
}
div{
  display:inline-block;
  vertical-align:top;
  color: red;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>

<body ng-app="myApp">
  <form name="Testform" ng-controller="nameController" class="formbg">
    <label>First Name:</label>
    <input type="text" name="userName" ng-model="firstName" required />
    <div ng-messages="Testform.userName.$error">
      <div ng-message="required">This field is required</div>
    </div>

    <label>Email Address:</label>
    <input type="email" name="userEmail" ng-model="email" required />
    <div ng-messages="Testform.userEmail.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="email">Your email address is invalid</div>
    </div>

    <label>Phone Number:</label>
    <input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
    <div ng-messages="Testform.userPhoneNumber.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="pattern">Must be a valid 10 digit phone number</div>
    </div>
	
	  <button type="submit" 
  ng-submit="Testform.$valid && submitForm()">Submit</button>

  </form>
</body>

Upvotes: 0

Answers (3)

Gihan Herath

Reputation: 1

You can use below code,

<form name="Testform" ng-controller="nameController" class="formbg" ng-
submit="submitForm()">
.
.
<button type="submit">Submit</button>

app.controller('nameController', function ($scope) {  
    $scope.submitForm = function() {
        if($scope.Testform.$valid == true)
        {
            alert('Form submitted');
        }
        else
        {
            alert('Form submit failed');
        }
    };
});

Upvotes: 0

jitender

Reputation: 10429

ng-submit should be on form tag instead of button

var app = angular.module('myApp', ['ngMessages']);


app.controller('nameController', function ($scope) {
  
  $scope.submitForm = function() {
    alert('Form submitted');
    
  };
  
});

body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
  width: 50%;
  margin: 0 auto;
  padding: 20px 20px 20px 20px;
  color: #444444;
  background: #4cb0db;
}
.formbg label {
  display: block;
  margin: 0px 0px 5px;
}
.formbg input[type="text"], 
.formbg  input[type="email"], 
.formbg input[type="number"] {
  width: 60%;
  padding: 0px 0px 0px 5px;
  border: 1px solid #C5E2FF;
  height: 30px;
  line-height:15px;
  margin: 2px 6px 16px 0px;
  border: 1px solid #C5E2FF;
  background: #FBFBFB;
}
div{
  display:inline-block;
  vertical-align:top;
  color: red;
  margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>

<body ng-app="myApp">
  <form name="Testform" ng-controller="nameController" class="formbg" ng-submit="submitForm()">
    <label>First Name:</label>
    <input type="text" name="userName" ng-model="firstName" required />
    <div ng-messages="Testform.userName.$error">
      <div ng-message="required">This field is required</div>
    </div>

    <label>Email Address:</label>
    <input type="email" name="userEmail" ng-model="email" required />
    <div ng-messages="Testform.userEmail.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="email">Your email address is invalid</div>
    </div>

    <label>Phone Number:</label>
    <input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
    <div ng-messages="Testform.userPhoneNumber.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="pattern">Must be a valid 10 digit phone number</div>
    </div>
	
	  <button type="submit" 
  >Submit</button>

  </form>
</body>

Upvotes: 2

Bharath Kumar

Reputation: 558

In submit button Instead of ng-submit use ng-click.

Demo link

Upvotes: 1

Contact form validation submit not working using angular js

Answers (3)

Related Questions