We Keep Coding

Angular form validation not working

I am very new to Angular and trying to build signup form, after looking at tutorials I built this form, but its not validating.
Here is the code which I am using:
<div class="signup-cont cont form-container" ng-controller="signinSignUpController">
<form id="login-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error' : signUpForm.name.$invalid && !signUpForm.name.$pristine }">
<input type="name" name="name" id="usr-name" class="inpt form-control" placeholder="Your name" ng-model="name" ng-required="true"/>
<label class="control-label" for="name">Your name</label>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.name.$invalid "></span>
<p ng-show="submitted && signUpForm.name.$invalid" class="help-block">You name is required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error has-feedback' : submitted && signUpForm.email.$invalid}">
<label class="control-label" for="email">Your email</label>
<input type="email" name="email" class="inpt form-control" ng-model="email" placeholder="Your email" ng-required="true"/>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.email.$invalid"></span>
<p ng-show="submitted && signUpForm.email.$invalid" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error has-feedback' : submitted && signUpForm.password.$invalid}">
<label class="control-label" for="password">Your password</label>
<input type="password" name="password" class="inpt form-control" ng-model="password" placeholder="Your Password" ng-required="true"/>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="submitted && signUpForm.password.$invalid"></span>
<p ng-show="submitted && signUpForm.password.$invalid" class="help-block">Enter a valid email.</p>
</div>
<div class="submit-wrap">
<input type="submit" class="form-control submit-signup btn btn-black-border btn-default" ng-disabled="signUpForm.$invalid" value="SIGN UP"/>
Terms and conditions
</div>
</form>
</div>
Can someone please help me understand where I am doing wrong.

change ng-model="name" to ng-model="user.name", ng-model="password" to ng-model="user.password" and ng-model="email" to ng-model="user.email".
I have checked using plunker its working fine.

ng-show="submitted && signUpForm.name.$invalid"
What exactly is submitted here? If that is something in the controller, seems like it's set to false & failing the validation. Check out this plunk w/o the submitted flag.

The entity name must immediately follow the '&' in the entity reference AngularJs Validation

Hey everyone am trying to make a validation for a form with AngularJS in Thymeleaf
<form name="registerForm" novalidate="">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label>Lastname *</label>
<input id="lastname" type="text" ng-model="lastname" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Firstname *</label>
<input id="firstname" type="text" ng-model="firstname" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Date of birth *</label>
<input id="birth" type="date" ng-model="brith" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>email *</label>
<input id="email" type="text" ng-model="email" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Username *</label>
<input id="user" type="text" ng-model="user" class="form-control" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Acount Type *</label>
<select ng-model="accout" class="form-control" required="required" >
<option selected="">StartUp</option>
<option>Entreprise</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.pass.$invalid, 'has-success': registerForm.pass.$valid}">
<label>Password *</label>
<input id="pass" name="pass" type="text" ng-model="pass" ng-minlength="6" class="form-control" required="required" />
<span class="text-danger" ng-show="registerForm.pass.$error.minlength">Password Too Short</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{'has-error': registerForm.$dirty && registerForm.confpass.$invalid, 'has-success': registerForm.confpass.$valid}">
<label>Confirm Password *</label>
<input id="confpass" name="confpass" type="text" ng-model="confpass" class="form-control" equals-to="registerForm.pass" required="required" />
<span ng-show="!registerForm.confpass.$error.required && registerForm.confpass.$error.equalsTo">Vérifiez votre mot de passe</span>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger pull-right" >Sign Up</button>
</div>
</div>
</div>
</form>
This actually work in a simple HTML Page in Thymeleafi get this kind of error
The entity name must immediately follow the '&' in the entity reference
i've tried replacing the && with &&
the form validation wont work , am not having any errors but i don't think that the conditions are correct.

Thymeleaf Doesn't Support &&.
You use 'and' instead of '&&'.
For Example :
<span ng-show="!registerForm.confpass.$error.required and registerForm.confpass.$error.equalsTo">Vérifiez votre mot de passe</span>

my controller doesn't work

i create an app , a login page and a controller like this :----->
--->here here :)
(function(){
'use strict';
angular
.module("loginApp",[])
.controller("loginCtrl",loginCtrl);
loginCtrl.$inject = ['$location','$scope','loginService'];
function loginCtrl($location,$scope,loginService){
var vm = $scope;
vm.login = login;
function login(){
var user = vm.user;
console.log(user);
};
}
})();
<body ng-app="loginApp" ng-controller="loginCtrl">
<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" ng-submit="login()" role="form" method="post">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="user.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="user.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-primary">Login</button>
<img ng-if="dataLoading"/>
Register
</div>
</form>
</div>
...................
<!-- App -->
<script src="angular/scripts/login.router.js"></script>
<script src="angular/scripts/controllers/login/loginCtrl.js"></script>
but when i click the button "login()" , nothing happend. i don't know why .

Because you don't use the scope directly in your controller (good way) you have to set an alias in your html (loginCtrl as login). Afterwards you set the models and call ctrl-functions with the alias as prefix (login.user.username).
<body ng-app="loginApp" ng-controller="loginCtrl as login">
<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" ng-submit="login.login()" role="form" method="post">
<div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
<label for="username">Username</label>
<input type="text" name="username" id="username" class="form-control" ng-model="login.user.username" required />
<span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
<label for="password">Password</label>
<input type="password" name="password" id="password" class="form-control" ng-model="login.user.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-primary">Login</button>
<img ng-if="dataLoading"/>
Register
</div>
</form>
</div>
...................
<!-- App -->
<script src="angular/scripts/login.router.js"></script>
<script src="angular/scripts/controllers/login/loginCtrl.js"></script>

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;
}
};
});

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" />

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>

I want to redirect on next page on same directory on button click -

Hi here is my php code for registration, I want to redirect to next page of this registration process after clicking on NEXT button.
Please let me know is there any solution or my mistakes i this code .
<form role="form" action="poolersign.php" method="POST" enctype="multipart/form-data">
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Last Name</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="Lname" id="service_range" placeholder="Enter Last Name">
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">First Name</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="Fname" id="shop_name" placeholder="Enter First Name">
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Home Address</label><span style="color:red"> *</span>
<textarea class="form-control" name="Home_address" id="full_address" placeholder="Home Address" cols="20" rows="2"></textarea>
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Office Address</label><span style="color:red"> *</span>
<textarea class="form-control" name="Office_address" id="full_address" placeholder="Office Address" cols="20" rows="2"></textarea>
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Pincode</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="hpincode" id="person_name" placeholder="Enter pincode of home address">
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Pincode</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="opincode" id="pincode" placeholder="Enter pincode of office address">
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">ID Card Number</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="idcard_number" placeholder="Enter ID Card Number">
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Mobile Number</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="mobile_number" id="tin_number" placeholder="Enter Mobile Number">
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Email</label><span style="color:red"> *</span>
<input type="email" class="form-control" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" name="email" id="email" placeholder="Enter email">
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Enter Username</label><span style="color:red"> *</span>
<input type="text" class="form-control" name="username" id="full_address" placeholder="Enter Username" >
</div>
<div class="form-group" style="float:left;width:40%">
<label for="exampleInputEmail1">Enter Password</label><span style="color:red"> *</span>
<input type="Password" class="form-control" name="password" id="password" placeholder="Enter Password">
</div>
<div class="form-group" style="float:right;width:40%">
<label for="exampleInputEmail1">Confirm Password</label><span style="color:red"> *</span>
<input type="Password" class="form-control" name="confirm" id="confirm" placeholder="Confirm Password">
</div>
<div class="form-group" style="float:left;width:40%">
Gender
<input type="radio" name="gender" value="female" checked> Female
<input type="radio" name="gender" value="male">Male
</div>
<div class="clearfix"> </div>
<div class="form-group" style="width:100%">
**<center><div style="float:left;width:80%"><button type="submit" id="postJson" name="add_store" class="btn btn-success"/> Next</button>
<button type="reset" class="btn btn-success"/>Reset</button></div></center>**
</div>
</form>
<?php include("admin/save_store.php"); ?>
</div>
</div>
<div class="col-md-4 col-md-offset-0.5">
</form>
</div>
</div>
<!--/ADD POOLER -->
</div>
<?php
include("config/conn.php");
$Error ="";
$successMessage ="";
//if (isset($_POST['add_store'])){
if(!empty($_POST['Home_addresss']) && !empty($_POST['Fname']) && !empty($_POST['Office_address']) && !empty($_POST['username']) && !empty($_POST['Lname'])&& !empty($_POST['mobile_number']) && !empty($_POST['hpincode']) && !empty($_POST['mobile_number']) && !empty($_POST['email']) && !empty($_POST['opincode']) && !empty($_POST['password']) && !empty($_POST['confirm'])&& !empty($_POST['idcard_number']))
{
$unm=$_POST['username'];
$email=$_POST['email'];
$res=$conn->query("select * from poolreg where shop_name='$unm' or email='$email'")or die(mysql_error());
if($res->num_rows > 0)
{
echo "Username already exist!!";
//$Error="Shop Name already Exist!";
}
else
{
if($_POST['password']==$_POST['confirm'])
{
//$area_address=$_POST['area_address'];
//$setting_latitude=$_POST['setting_latitude'];
//$setting_longitude=$_POST['setting_longitude'];
$service_range=$_POST['Lname'];
$shop_name=$_POST['Fname'];
//$shop_number=$_POST['shop_number'];
$Home_address=$_POST['Home_address'];
$Office_address=$_POST['Office_address'];
$hpincode=$_POST['hpincode'];
$opincode=$_POST['opincode'];
$mobile_number=$_POST['mobile_number'];
//$description=$_POST['description'];
$idcard_number=$_POST['idcard_number'];
$username=$_POST['username'];
$gender=$_POST['gender'];
/*$mobilewhatsup=$_POST['mobilewhatsup'];
$other_number=$_POST['other_number'];
$otherwhatsup=$_POST['otherwhatsup']; */
$email=$_POST['email'];
$passwd=strrev($_POST['password']);
$password=md5($passwd);
$date=md5(date("Y-m-d "));
$time=md5(date("h:i:sa"));
$rand=rand(0,999);
$date="shop_".substr($shop_name,0,3).substr($date,0,3).substr($time,0,3);
$sql = "insert into poolreg(Lname,Fname,Officeaddr,Homeaddr,Officepincode,Homepincode,mobile,IDcardnumber,email,username,password,gender)values('$service_range','$shop_name','$Office_address','$Home_address','$opincode','$hpincode','$mobile_number','$idcard_number','$email','$username','$password','$gender')";
**if ($conn->query($sql) === TRUE)
{
header("Location: poolersign1.php");
}**
else
{
echo "Error in adding Current Record!!!!";
//$Error="Error in adding Current Record!";
}
}
else
{
echo "Password doesnt match!!!!!";
//$Error="Password Not Match";
}
}
}
else
{
echo "Fill the required Fields!!!!";
//$Error="Fill The Required Fields!";
}
//}
if all the fields are fill-up correctly on this page it should redirect to poolersign1.php for next process. You can see live here wepooldemo.welfare678advertisement.com/poolersign.php

You will have to write code in your poolersign.php.
You can use header("Location: ") function.

You have make some mistake trying to replace code :
From:
if(!empty($_POST['Home_addresss']) && !empty($_POST['Fname']) && !empty($_POST['Office_address']) && !empty($_POST['username']) && !empty($_POST['Lname'])&& !empty($_POST['mobile_number']) && !empty($_POST['hpincode']) && !empty($_POST['mobile_number']) && !empty($_POST['email']) && !empty($_POST['opincode']) && !empty($_POST['password']) && !empty($_POST['confirm'])&& !empty($_POST['idcard_number']))
to:
if(!empty($_POST['Home_address']) && !empty($_POST['Fname']) && !empty($_POST['Office_address']) && !empty($_POST['username']) && !empty($_POST['Lname'])&& !empty($_POST['mobile_number']) && !empty($_POST['hpincode']) && !empty($_POST['mobile_number']) && !empty($_POST['email']) && !empty($_POST['opincode']) && !empty($_POST['password']) && !empty($_POST['confirm'])&& !empty($_POST['idcard_number']))