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>
Related
I have a simple form created and that having one function to console.log all the field values. How can I get these logs to appear on AWS Cloudwath ?
My form -
<form role="form" id="form" name="form" method="POST">
<div class="form-group">
<label for="name">Enter Name</label>
<input ng-model="data.name" type="text" class="form-control" id="name" aria-describedby="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="age">Age</label>
<input ng-model="data.age" type="text" maxlength="3" class="form-control" id="age" placeholder="Enter Age">
</div>
<div class="form-group">
<label for="address">Address</label>
<input ng-model="data.address" type="text" class="form-control" id="address" placeholder="Enter Address">
</div>
<button type="submit" class="btn btn-primary" ng-click="reqCalling()">Submit</button>
</form>
Please Help I have no idea what to do
I have the following form that I want to use the bootstrap-validator:
<form method="POST" action="http://localhost:8000/register/researcher" accept-charset="UTF-8" data-toggle="validator" novalidate="true">
<input name="_token" type="hidden" value="v5VF4sgb0zOrxzAihpEhkezccUWHPpXO5CnnmIK7">
<div class="from-group">
<input class="form-control" placeholder="Nome" required="required" name="name" type="text">
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Email" data-error="O email inserido é inválido." required="required" name="email" type="email">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Senha" data-minlength="6" id="inputPass" required="required" name="password" type="password" value="">
<span class="help-block">Senha de no mínimo 6 caracteres</span>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Confirmar senha" data-match="#inputPass" data-match-error="Senhas inseridas são diferentes" required="required" name="password_confirmation" type="password" value="">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="CPF" required="required" name="cpf" type="text">
</div>
<br>
<div class="text-center">
<input class="btn btn-primary disabled" type="submit" value="Enviar">
</div> </form>
I'm importing the validator.js and somehow it's working (it disables the submit button) but no erros are shown when I test the form. Can you help me to find where I'm doing something wrong?
(Plus: I'm using the laravel HTML Form Facades to generate this form)
Update the class from-group to form-group.
Init bootstrapValidator instance by the following code.
$(function () {
$("#your form id").bootstrapValidator();
);
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
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/>
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.