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.
Related
Given the following HTML
<form class="form-horizontal"
asp-controller="Installation"
asp-action="CreateUser"
method="post">
<fieldset>
<!-- Form Name -->
<legend>Account Creation</legend>
<!-- Username input-->
<div class="form-group">
<label class="col-md-4 control-label" for="userName">Username</label>
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span class="has-error" asp-validation-for="UserName"></span>
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">E-mail</label>
<div class="col-md-4">
<input id="email"
name="email"
type="text"
placeholder="jane#doe.com"
class="form-control input-md"
required=""
asp-for="Email">
<span class="help-block">Enter your e-mail address</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-4">
<input id="password"
name="password"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="Password">
<span class="help-block">Enter a password that is at least 8 characters, fewer than 30</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="confirmPassword">Confirm Password</label>
<div class="col-md-4">
<input id="confirmPassword"
name="confirmPassword"
type="password"
placeholder="password"
class="form-control input-md"
required=""
asp-for="PasswordConfirmation">
<span class="help-block">Re-enter your password</span>
</div>
</div>
<!-- Submit -->
<div class="form-group">
<label class="col-md-4 control-label"
for="createAccount"></label>
<div class="col-md-4">
<button id="createAccount" type="submit" name="createAccount" class="btn btn-primary">Create Account</button>
</div>
</div>
</fieldset>
</form>
I would like to hide/show the usernameTip span, when the asp-validation-for span contains a validation error, along with any other span that i'm using as a tip when there is an adjacent asp-validation-for span.
Reading this post I can get the JavaScript needed to show/hide the span. The only thing I can't figure out is if the View actually has knowledge of the validation errors in a manor that lets me conditionally hide/show that usernameTip span if errors exist.
Does anyone know what I need to do in order to toggle the visibility based off the data annotation errors on my model?
When looking in Chrome, asp-validation-for span is turned into this at compile time:
<span class="has-error field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">Usernames must be between 2 and 50 characters</span>
EDIT
When validation fails, there is a ==$0 appended to the end.
Usernames must be between 2 and 50 characters == $0
I do not see any classes being added or removed from the span when the validation fails.
Edit 2
I got this working using the accepted answer. For those looking in the future however, you can use MVC's ViewData property in the view to determine if there are errors.
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
#if (ViewData.ModelState[nameof(AccountCreationViewModel.UserName)] == null || ViewData.ModelState[nameof(AccountCreationViewModel.UserName)].Errors.Count == 0)
{
<span class="help-block">Enter a unique Username</span>
}
else
{
<span class="label label-danger" role="alert" asp-validation-for="UserName"></span>
}
</div>
<div class="col-md-4">
<input id="UserName" name="UserName" asp-for="UserName" type="text" placeholder="Username" class="form-control input-md" required="">
<span id="usernameTip" class="help-block hidden">Enter a unique Username</span>
<span id="error" class="has-error" asp-validation-for="UserName"></span>
</div>
<script>
if( $("#error").text().length>0){
//show usernameTip
}
</script>
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
I have this modal form to get input from user. before submitting user form, i want to check if user enter their username, name, password, confirm password, status and scope. note that status is in radio button and scope is in check box.
But the problem i encounter now is that, the user still can click the button save and it doesn't check the condition as i describe above.
<div class="modal-body">
<form name="addUser" ng-submit="(addUser.username.$valid && addUser.name.$valid && addUser.password.$valid &&
addUser.confirmpassword.$valid && addUser.status.$valid && addUser.scope.$valid) ? add() : '';">
<div class="alert alert-danger" ng-if="hasError">
<button type="button" class="close" aria-hidden="true" ng-click="setError(false);">×</button>
<strong>Error!</strong> {{errorMessage}}
</div>
<div class="form-group has-feedback" ng-class="addUser.username.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="username">Username</label>
<input class="form-control" name="username" ng-model="user.username" required>
<span class="glyphicon form-control-feedback" ng-class="addUser.username.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.name.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="name">Name</label>
<input class="form-control" name="name" ng-model="user.name" required>
<span class="glyphicon form-control-feedback" ng-class="addUser.name.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.password.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="password">Password</label>
<input type="password" class="form-control" name="password"
ng-model="user.password" required ng-minlength="5">
<span class="glyphicon form-control-feedback"
ng-class="addUser.password.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.confirmpassword.$valid ? 'has-success' : 'has-error';">
<label class="control-label" for="confirmpassword">Re-enter password</label>
<input type="confirmpassword" class="form-control" name="confirmpassword"
ng-model="user.confirmpassword" required ng-minlength="5">
<span class="glyphicon form-control-feedback"
ng-class="addUser.confirmpassword.$valid ? 'glyphicon-ok' : 'glyphicon-remove';"></span>
</div>
<div class="form-group has-feedback" ng-class="addUser.status.$valid ? 'has-success' : 'has-error';">
<label for="status">Status</label><br>
<input type="radio" ng-model="user.status" name="status" value="1"> Active
<input type="radio" ng-model="user.status" name="status" value="0"> Inactive<br>
</div>
<br>
<div class="form-group has-feedback" ng-class="addUser.scope.$valid ? 'has-success' : 'has-error';">
<label for="scope">Scope</label><br>
<input type="checkbox" ng-model="user.scope.admin" name="scope[]" value="admin"> Admin <br>
<input type="checkbox" ng-model="user.scope.app" name="scope[]" value="app"> App <br>
<input type="checkbox" ng-model="user.scope.redemption" name="scope[]" value="redemption"> Redemption <br>
<br>
</div>
<div ng-switch on="isLoading">
<div ng-switch-when="true">
<button type="button" class="btn btn-primary btn-block disabled">Saving ...</button>
</div>
<div ng-switch-when="false">
<button type="submit" class="btn btn-primary btn-block" ng-click="add();" >Save</button>
</div>
</div>
</form>
</div>
Haven't tested this but looks like your ng-model is using an object 'user' for each property being captured whereas your ng-submit condition doesn't factor that in. Not sure if that's the issue but that's one thing you may want to check.
Also looks like you could do something like addUser.$valid instead of doing the full checks. You could also additionally try to disable the submit button by using
ng-disabled="addUser.$invalid".
Here's a tutorial: https://scotch.io/tutorials/angularjs-form-validation
When a user is editing any part of their address, every field should have the red invalid border around it indicating that the full form is required. I can't get the 'Address' field to show the invalid red border.
set-dirty-if='user.objectId' sets every field to dirty. I probably have access logic, but the idea is to force the user fill out every address field and having indicators to do so.
What am I missing to get the 'Address' invalid error to show?
(note that populating the "Address" field will turn city, state, zip's border red, which is desired)
<form class="form" name='form' class="edit-form-wrapper" novalidate>
<fieldset class="form-group" ng-class="{'has-error': form.address.$dirty && !form.address.$valid, 'has-feedback': form.address.$dirty && !form.address.$valid}">
<label class="control-label" for="address">Address</label>
<input type="text" class="form-control" name="address" ng-model="user.address" set-dirty-if="user.objectId" ng-required="user.city || user.state || user.zip">
<span ng-show="form.address.$dirty && !form.address.$valid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</fieldset>
<fieldset class="form-group" ng-class="{'has-error': form.city.$dirty && !form.city.$valid, 'has-feedback': form.city.$dirty && !form.city.$valid}">
<label class='control-label' for="city">City</label>
<input type="text" class="form-control" name="city" ng-model="user.city" set-dirty-if='user.objectId' ng-required='user.address || user.state || user.zip'>
<span ng-show='form.city.$dirty && !form.city.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</fieldset>
<fieldset class="form-group" ng-class="{'has-error': form.state.$dirty && !form.state.$valid, 'has-feedback': form.state.$dirty && !form.state.$valid}">
<label class='control-label' for="state">State</label>
<input type="text" class="form-control" name="state" ng-model="user.state" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.zip'>
<span ng-show='form.state.$dirty && !form.state.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</fieldset>
<fieldset class="form-group" ng-class="{'has-error': form.zip.$dirty && !form.zip.$valid, 'has-feedback': form.zip.$dirty && !form.zip.$valid}">
<label class='control-label' for="zip">Zip Code</label>
<input type="text" class="form-control" name="zip" ng-model="user.zip" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.state'>
<span ng-show='form.zip.$dirty && !form.zip.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</fieldset>
</form>
Change your ng-required value of address field from user.city || user.state || user.zip to (user.city || user.state || user.zip) ? true : false) i.e.:
<input type="text" class="form-control" name="address" ng-model="user.address"
ng-required="(user.city || user.state || user.zip) ? true : false">
See a working example below
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div ng-app class="container">
<form class="form" name='form' class="edit-form-wrapper">
<fieldset class="form-group" ng-class="{'has-error': form.address.$dirty && !form.address.$valid, 'has-feedback': form.address.$dirty && !form.address.$valid}">
<label class="control-label" for="address">Address</label>
<input type="text" class="form-control" name="address" ng-model="user.address" ng-required="(user.city || user.state || user.zip) ? true : false">
<span ng-show="form.address.$dirty && !form.address.$valid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</fieldset>
<fieldset class="form-group" ng-class="{'has-error': form.city.$dirty && !form.city.$valid, 'has-feedback': form.city.$dirty && !form.city.$valid}">
<label class='control-label' for="city">City</label>
<input type="text" class="form-control" name="city" ng-model="user.city" set-dirty-if='user.objectId' ng-required='user.address || user.state || user.zip'>
<span ng-show='form.city.$dirty && !form.city.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</fieldset>
<fieldset class="form-group" ng-class="{'has-error': form.state.$dirty && !form.state.$valid, 'has-feedback': form.state.$dirty && !form.state.$valid}">
<label class='control-label' for="state">State</label>
<input type="text" class="form-control" name="state" ng-model="user.state" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.zip'>
<span ng-show='form.state.$dirty && !form.state.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</fieldset>
<fieldset class="form-group" ng-class="{'has-error': form.zip.$dirty && !form.zip.$valid, 'has-feedback': form.zip.$dirty && !form.zip.$valid}">
<label class='control-label' for="zip">Zip Code</label>
<input type="text" class="form-control" name="zip" ng-model="user.zip" set-dirty-if='user.objectId' ng-required='user.address || user.city || user.state'>
<span ng-show='form.zip.$dirty && !form.zip.$valid' class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
</fieldset>
</form>
</div>
I have created a form in ionic-angular and applied validations on it.Validations are not working properly.Even all the fields are empty on click of submit button it calls controller function.
Please help me to solve this issue.
html code
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Register</h1>
</ion-header-bar>
<ion-content >
<form name="register" ng-submit="submitDetails(user)" novalidate="">
<div class="list">
<label class="item item-input item-floating-label" style="position:relative;">
<span class="input-label">First Name</span>
<input type="text" placeholder="First Name" ng-model="user.firstName" ng-required="true">
<p ng-show="user.firstName.$invalid && !user.firstName.$pristine" class="help-block">You name is required.</p>
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" placeholder="Email" ng-model="user.email" ng-required="true">
<p ng-show="user.email.$invalid && !user.email.$pristine" class="help-block">Enter a valid email</p>
</label>
<label class="item item-input item-floating-label">
<span class="input-label" >Phone no</span>
<input type="number" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true">
<span class="help-block" ng-show="user.phone.$error.required || user.phone.$error.number">Valid phone number is required</span>
<span class="help-block" ng-show="((user.phone.$error.minlength || user.phone.$error.maxlength) && user.phone.$dirty) ">phone number should be 10 digits</span>
</label>
<input type="submit" class="button button-royal" value="register">
</div>
</form>
</ion-content>
</ion-pane>
Controller code
chatApp.controller('RegisterCntrl', function($scope, $stateParams) {
$scope.user={};
$scope.submitDetails=function(user){
alert("user"+user.firstName);
};
});
This should work
<form name="register_form" ng-submit="submitDetails(user)" novalidate="">
<div class="list">
<label class="item item-input item-floating-label" style="position:relative;">
<span class="input-label">First Name</span>
<input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true">
<p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>
</label>
<!--omitted-->
<input type="submit" class="button button-royal" value="register">
</div>
</form>
Form name is register_form,
<form name="register_form" ng-submit="submitDetails(user)" novalidate="">
Input name is user_first_name,
<input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true">
So validation must pass through those fields
<p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>
Model itself doesn't have $invalid or $pristine properties, so it doesn't make sense
For phone field
<input type="number" name="user_phone" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true">
<span class="help-block" ng-show="register_form.user_phone.$error.required || register_form.user_phone.$error.number">Valid phone number is required</span>
<span class="help-block" ng-show="((register_form.user_phone.$error.minlength || register_form.user_phone.$error.maxlength) && register_form.user_phone.$dirty) ">phone number should be 10 digits</span>
For further readings, checkout this answer
Use the form name and input name attribute, not ng-model
Give the input a name and use it with form name.
Check the first input in following example.
<label class="item item-input item-floating-label" style="position:relative;">
<span class="input-label">First Name</span>
<input name="firstName" type="text" placeholder="First Name" ng-model="user.firstName" ng-required="true">
<p ng-show="register.firstName.$invalid && !register.firstName.$pristine" class="help-block">Your name is required.</p>
</label>