We Keep Coding

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>

angularjs enable submit button when validate confirm message

I have the following register page
<div class="col-md-6 col-md-offset-3">
<h2>Add New User</h2>
<form name="form" ng-submit="vm.register()" role="form">
<div class="form-group"
ng-class="{ 'has-error': form.type.$dirty && form.type.$error.required }">
<label for="type">User Type</label>
<md-radio-group ng-init="vm.user.type=0" ng-model="vm.user.type" required>
<md-radio-button value="0" class="md-primary">Back Office</md-radio-button>
<md-radio-button value="1" class="md-primary md-hue-1"> Mobile </md-radio-button>
<md-radio-button value="2" class="md-primary md-hue-2">Client</md-radio-button>
</md-radio-group>
</div>
<div class="form-group" ng-class="{ 'has-error': form.firstname.$dirty && form.firstname.$error.required }">
<label for="firstname">First name</label>
<input type="text" name="firstname" id="firstname" class="form-control" ng-model="vm.user.firstname" required />
<span ng-show="form.firstname.$dirty && form.firstname.$error.required" class="help-block">First name is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">
<label for="lastname">Last name</label>
<input type="text" name="lastname" id="Text1" class="form-control" ng-model="vm.user.lastname" required />
<span ng-show="form.lastname.$dirty && form.lastname.$error.required" class="help-block">Last name is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.lastName.$dirty && form.lastName.$error.required }">
<label for="company">Company</label>
<input type="text" name="company" id="Text2" class="form-control" ng-model="vm.user.company" required />
<span ng-show="form.company.$dirty && form.company.$error.required" class="help-block">Company is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.Email.$dirty && form.Email.$error.required }">
<label for="email">Email</label>
<input type="text" name="email" id="Text2" class="form-control" ng-model="vm.user.email" ng-pattern="/\s?^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/i" required />
<span ng-show="form.email.$dirty && form.email.$error.required"
class="help-block">Email is required</span>
<span class="help-block" ng-show="form.email.$dirty && form.email.$error.pattern"> Not valid email! </span>
</div>
<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="vm.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="vm.user.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': form.confirmpassword.$dirty && form.confirmpassword.$error.required }">
<label for="confirmpassword">Confirm Password</label>
<input type="password" name="confirmpassword" id="confirmpassword" class="form-control" ng-model="vm.user.confirmpassword" valid-password-c required />
<span ng-show="form.confirmpassword.$dirty && form.confirmpassword.$error.required" class="help-block">Confirm Password is required</span>
<span ng-show="!form.confirmpassword.$error.required && form.confirmpassword.$error.noMatch && form.confirmpassword.$dirty" class="help-block">Passwords do not match.</span>
</div>
<div class="form-actions">
<button type="submit" ng-disabled="form.$invalid" class="btn btn-primary">Register</button>
<img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
Cancel
</div>
</form>
</div>
I have 2 problems
1- the Register button is always disabled even if I filled the all fields.
2- during confirm password validation
If I fill the password then fill the confirmpassword with the same value every thing will be good, but if I modified my password again the page will not show that the two passwords is not match

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>

Trying to use angular-auto-validate by jonsamwell, but form validation is not working

Here is the JS code, every thing work fine except the form is not validated.
var app = angular.module('minmax', ['jcs-autoValidate']);
app.controller('MinMaxCtrl', ['$scope', '$http', function($scope, $http){
$scope.formModel = {};
$scope.onSubmit = function(valid){
if(valid){
console.log("form submitted");
console.log($scope.formModel);
}else{
console.log("invalid form");
}
};
}]);
Here is my HTML page, there's a form in here that i want to validate using the angular auto validate.
Every thing work fine except the form is not validated.
<!DOCTYPE html>
<html lang="en-us" ng-app="minmax">
<title>W3.CSS</title>
<head>
<title>AngularJS weathre Forecast SPA</title>
<Meta charset="UTF-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
<script src="https://code.angularjs.org/1.3.4/angular.min.js"></script>
<script src="https://cdn.rawgit.com/jonsamwell/angular-auto-validate/master/dist/jcs-auto-validate.min.js"></script>
<script src="js.js"></script>
</head>
<body >
<div class="container main-content" ng-controller="MinMaxCtrl">
<form ng-submit="onSubmit(theForm.$valid)" name="theForm" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" ng-model="formModel.name" name="name" required/>
</div>
<!--
//////////////////////////////////////// Form validation with core angularJS ///////////////////////////////////////
<div class="form-group "
ng-class="{
'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),
'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
}">
<label>Email</label>
<input type="email" class="form-control" name="email" ng-model="formModel.email" required/>
<p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)" >
This field is required.
</p>
<p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)" >
Please enter an email id.
</p>
<pre>Validation {{theForm.email.$error | json}}</pre>
<pre>Field Valid? {{theForm.email.$valid}}</pre>
<pre>Form pristine? {{theForm.$pristine}}</pre>
<pre>Form Submitted? {{theForm.$submitted}}</pre>
</div>-->
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" ng-model="formModel.email" required/>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" ng-model="formModel.password" required/>
</div>
<div class="form-group">
<label>Age</label>
<input type="number" class="form-control" name="Age" ng-model="formModel.age" required/>
</div>
<div class="form-group">
<label for="sex">Sex</label>
<select name="sex" id="sex" class="form-control" ng-model="formModel.sex" required>
<option value="" > Please choose </option>
<option value="Male" > Male </option>
<option value="Female" > Female </option>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Register</button>
</div>
</form>
<pre>{{theForm | json}}</pre>
</div>
</body>

It seems that all you have is working well.
See example jsfiddle.
Is that, I did not use the module jcs-autoValidate

ngSubmit and ngDisabled not working, but ngModel is bound to controller

This doesn't look any different than what I thought I would normally write when I put a form together in AngularJS, but for whatever reason ngSubmit is not working, and ngDisabled isn't disabling the button when the fields are empty. I took the section and pasted it into a new project to see if it was just acting out due to some other dependencies, but it still doesn't work even after trimming the fat. Can anyone see what is wrong, it's obvious after this amount of time I'm not going to see it myself.
I preloaded the form fields using the controller to verify that they are talking, interpolated the user data in pre tags which are bound to ng-model since I can see it update as I type, and there are no ng errors occuring, even looking at Chromes angular plugin it looks fine. But, login() is never invoked on ngSubmit and the button is never ngDisabled when the required fields are blank.
Stripped down version of the issue that still doesn't work:
<div ng-app="myApp">
<div ng-controller="LoginController as loginCtrl">
<form name="loginForm" role="form" ng-submit="loginCtrl.login()" novalidate></form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" ng-model="loginCtrl.user.username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" ng-model="loginCtrl.user.password" required>
</div>
<div class="form-group clearfix">
<button type="submit" class="btn btn-primary btn-block" ng-disabled="loginForm.$invalid">Login</button>
</div>
<pre>user data = {{loginCtrl.user | json}}</pre>
<pre>form invalid = {{loginForm.$invalid}}</pre> <!-- always says false... but it is invalid -->
</form>
</div>
</div>
<script>
(function() {
'use strict';
angular.module('myApp', [])
.controller('LoginController', [function() {
var self = this;
self.user = { username: 'asdf', password: 'asdf' };
self.login = function() {
console.log("hello world");
};
}]);
})();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

make sure that angular libraries are included.
https://docs.angularjs.org/misc/downloading
and have a look at these solutions
https://github.com/angular/angular.js/issues/2513
and if you like to see my working form...
<div class="col-md-10">
<form class="tab-pane active form-horizontal" id="first" name="userForm" novalidate ng-submit="save()">
<h2>Sign up</h2>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.username.$invalid}">
<label class="control-label col-md-3">UserName <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="username" class="form-control" ng-model="user.username" required placeholder="username"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Username is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.email.$invalid}">
<label class="control-label col-md-3">Email <span class="required">* </span> </label>
<div class="col-md-4">
<input type="email" name="email" class="form-control" ng-model="user.email" required placeholder="email"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Email is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.password.$invalid}">
<label class="control-label col-md-3">Password <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="password" class="form-control" ng-model="user.password" required placeholder="1.2"/>
</div>
<p ng-show="submitted && userForm.password.$error.required" class="help-block">Password is required.</p>
</div>
<div class="form-group">
<label class="control-label col-md-3">Confirm Password </label>
<div class="col-md-4">
<input type="text" name="password_confirmation" class="form-control" ng-model="user.password_confirmation"
placeholder="password_confirmation"/>
</div>
<p ng-show="submitted && userForm.password_confirmation.$invalid" class="help-block">password_confirmation is required.</p>
</div>
<div class="form-group">
<div class="pull-left">
<a class="btn btn-default" href="/app/assets/images"> Back</a>
<button type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button>
</div>
</div>
</form>
</div>