Multiple required fields in angular JS - javascript

I have a new profile form that has multiple required fields, email, password and confirm password. The submit button is set to be disabled if the form is in invalid state. I believe that form should remain in invalid state until user has filled in all the required fields. To my surprise, angular checks my first field only. If it is alone in valid state, submit button gets activated, regardless of states of other fields. I am using angular 1.0.7. What is the reason behind this behavior ?
<form name='newProfileForm' ng-submit="formSubmit(newProfileForm.$valid)" novalidate>
<fieldset>
<legend>Login Information</legend>
</fieldset>
<!-- NAME -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.mail" required>
<p ng-show="newProfileForm.email.$invalid && newProfileForm.email.$dirty">Please enter valid email.</p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="pass" required/>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" required/>
</div>
<fieldset>
<legend>Personal Details</legend>
</fieldset>
<div class="form-group">
<label>Title</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Address</label>
<textarea rows="3"></textarea>
</div>
<div class="form-group">
<label>Country</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>State</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>City</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>Pin Code</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Gender</label>
<select class="span3">
<option label="Male" value="Male"/>
<option label="Female" value="Female"/>
</select>
</div>
<div class="form-group">
<label>Field of Interest</label>
<input type="text" class="form-control"/>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary" ng-disabled="newProfileForm.$invalid">Submit</button>
</form>

You forgot to give ng-model to your password and confirm password field. Do it like
<input type="password" class="form-control" name="pass" ng-model="pass" required/>
<input type="password" class="form-control" name="confirmpass" ng-model="confirmpass" required/>

Related

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>

Input boxes not spaced when viewport is resized (bootstrap)

I'm currently creating a sign up form using bootstrap and I was making the first name and last name text boxes inline but when I resize the browser by compacting it, the display of both text boxes seem to stick? I've tried using inline-block and also margin but it'll affect the others too which would look odd. Here is an sample. (You'd have to zoom-out to see the effect.)
http://jsfiddle.net/5ghc1r18/6/
<div class="container">
<div class="wrapper">
<div class="row">
<div style="overflow:auto;width:90%" class="col-lg-10">
<form id="form" action="welcome.php" class="form-horizontal" method="POST">
<h1 class="text-center">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Sign Up
</h1>
<div class="form-group">
<div class="col-lg-6">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
<div class="col-lg-6">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="email" placeholder="Email Address" name="email" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input type="text" placeholder="Mobile" name="mobile" class="form-control" required/>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<label for="day">Date of Birth:</label>
<div id="date1" class="datefield">
<input id="day" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="DD" />/
<input id="month" type="tel" onkeypress="return isNumberKey(event)" maxlength="2" placeholder="MM" />/
<input id="year" type="tel" onkeypress="return isNumberKey(event)" maxlength="4" placeholder="YYYY" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<select name="gender" class="form-control" required>
<option value="">Select one</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">I'm not sure</option>
</select>
</div>
</div>
<div class="form group">
<div style="width:100%">
<button type="submit" class="btn btn-success btn-block"> <i class="fa fa-plus"></i> Sign up!</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks for the help!
The problem in your HTML is here
<div class="form-group">
<div class="col-lg-6">
put <div class="form-group"> inside the <div class="col-lg-6"> currently you are doing opposite.
e.g;
<div class="col-lg-6">
<div class="form-group">
<input id="firstname" type="text" placeholder="First Name" name="fname" class="form-control" pattern="[A-Z][a-zA-Z]*" required/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input id="lastname" type="text" placeholder="Last Name" name="lname" class="form-control" required/>
</div>
</div>
You can give margin to the input boxes:
input[type="text"] {
margin: 10px auto;
}

AngularJS form validation issues

I am trying to do a simple form validation using angular js. But it doesnt seems to work and I am not getting what I am missing.
HTML
<form role="form" class="ng-pristine ng-valid" name="registerForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" type="text"
autofocus="" required ng-class="{'has-error': registerForm.firstname.$invalid}">
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-class="{'has-error': registerForm.email.$dirty}">
<div ng-show="registerForm.email.$dirty">Email Invalid</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit"/>
</fieldset>
</form>
Now the issue is, I am expecting that if I start entering invalid email then it will show me error message "Email Invalid". But that doesn't happen.
Also when i put a debug before submitting blank form, it says "registerForm.$valid = true"
Any guess what am I missing. Any module that i need to include ?
Here is Plunker
First, you need registerForm.email.$error.email to trigger the 'invalid email' alert.
Second, I guess you have to bind these input fields with ng-models, but I am not sure if this is necessary.
One more thing, add 'novalidate' to the form element.
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" >
<div ng-show="registerForm.email.$error.email">Email Invalid</div>
</div>
You are missing a bunch of stuff. First of all, you need to have your fields associated with a model for them to be validated. Second, your syntax for accessing errors is incorrect.
Here is a working plunkr for what you are trying to do.
This is the relevant code:
<body ng-controller="MainCtrl">
<form role="form" name="registerForm" novalidate>
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" ng-model="firstname" type="text" autofocus="" ng-class="{'has-error': registerForm.firstname.$error.required}" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" ng-model="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" ng-model="email" type="email" value="" ng-class="{'has-error': registerForm.email.$error.pattern}" ng-pattern="/^\S+#\S+\.\S+$/i" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" ng-model="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" ng-model="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit" />
</fieldset>
</form>
<div ng-show="registerForm.firstname.$error.required">You must enter a first name.</div>
<div ng-show="registerForm.email.$error.pattern || registerForm.email.$error.required">Email Invalid</div>
</body>
Well, I am not sure but I think you also have to use $error with $dirty like this:
<div ng-show="registerForm.email.$dirty && registerForm.email.$error.email">Email Invalid</div>
Also, add novalidate to disable default browser validation like this:
<form role="form" class="ng-pristine ng-valid" name="registerForm" novalidate>

Angular Select ng-model doesnt bind to scope

I have the following form:
<form role="form" class="form-validation" ng-submit="profilCtrl.saveProfile()">
<div class="form-group">
<label class="control-label">Fornavn</label>
<input type="text" placeholder="John Hansen" class="form-control" ng-model="profile.firstname" name="name" value="{{profilCtrl.profile.firstname}}" required>
</div>
<div class="form-group">
<label class="control-label">Efternavn</label>
<input type="text" placeholder="John Hansen" class="form-control" ng-model="profile.lastname" name="name" value="{{profilCtrl.profile.lastname}}" required>
</div>
<div class="form-group">
<label class="control-label">Addresse</label>
<input type="text" placeholder="Mosebakken 12 2830 virum" class="form-control" ng-model="profile.address" name="address" value="{{profilCtrl.profile.address}}" required>
</div>
<div class="form-group">
<label class="control-label">Jobprofil</label>
<select class="form-control" ng-model="selectedTitle" ng-options="item as item.name for item in titles"></select>
</div>
<div class="form-group">
<label class="control-label">Telefon Number</label>
<input type="text" placeholder="12345678" class="form-control" name="phone" value="{{profilCtrl.profile.phone}}" required ng-model="profile.phone">
</div>
<div class="form-group">
<label class="control-label">Afdeling</label>
<select class="form-control" ng-model="selectedDivision" ng-options="division as division.name for division in divisions" required>
</select>
</div>
<div class="form-group">
<label class="control-label">Fødselsdag</label>
<input type="text" placeholder="04-04-1989" class="form-control" name="cpr" ng-model="profile.cpr" value="{{profilCtrl.profile.cpr}}" required>
</div>
<div class="form-group">
<label class="control-label">Vigtig information</label>
<textarea class="form-control" rows="3" placeholder="Dette er vigtigt for min leder at vide!" name="info" ng-model="profile.description">{{profile.description}}</textarea>
</div>
<div class="margiv-top-10">
<button type="submit" href="#" class="btn green-haze">
<i class="fa fa-check"></i>
</button>
</div>
</form>
Everything in this form works expect the two selects:
<select class="form-control" ng-model="selectedTitle" ng-options="item as item.name for item in titles"></select>
And:
<select class="form-control" ng-model="selectedDivision" ng-options="division as division.name for division in divisions" required>
Unlike the others are these not linked to the profile object and should instead be saved in $scope.selectedTitle and $scope.selectedDivision
However once i submit the form both of these are undefined.
Can anyone tell me why this might be happening

Form is not submitting data via POST or GET

I've recently been working on a website's user registration system and I just finished the front end, it is using parsleyjs to validate the values in the form.
The problem I have is when the form is submitted no values are passed, is there any reason for this happening?
Form Code
<form role="form" method="get" data-validate="parsley" id="register" action="register/2/">
<div class="form-group">
<label for="userFirstName">Frist Name</label>
<input type="text" class="form-control" id="userFirstName" placeholder="John" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="userLastName">Last Name</label>
<input type="text" class="form-control" id="userLastName" placeholder="Newman" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="NewJohn101" data-required="true" data-trigger="change" data-usernamecheck="true">
</div>
<div class="form-group">
<label for="userEmail">Email address</label>
<input type="email" class="form-control" id="userEmail" placeholder="Email" data-trigger="change" data-required="true" data-type="email">
</div>
<div class="form-group">
<label for="userPassword">Password</label>
<input type="password" class="form-control" id="userPassword" placeholder="Password" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="userPasswordRetype">Re-Type Password</label>
<input type="password" class="form-control" id="userPasswordRetype" placeholder="Re-Type Password" data-required="true" data-equalto="#userPassword" data-trigger="change">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Both POST and GET assign values to keys that are equivalent to the name attribute of your inputs. For example:
<input type="text" name="input1" value="test">
Will build the array
"test" => $_GET["input1"]
No name attribute. No array.

Categories