AngularJS form validation is always true - javascript

loginForm.$valid is always return true, even when required fields are not filled out. I was unable to find a similar problem anywhere.
<form name="loginForm"
class="form-login"
ng-submit="loginForm.$valid && loginCtrl.login(navCtrl)"
novalidate>
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control" id="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" required>
</div>
<div class="form-group text-right">
Forgot password?
</div>
<div>Login form is {{loginForm.$valid}}</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
Any help is appreciated.

Form validation and related flags will be set only if you have ng-model controllers assigned to the respective controls. So assign ng-model directive to them. Also instead of using id, you could use name. It will then be used as alias (property names) for the respective ng-model controller assigned on the formController instance (ex: loginForm.username.$valid ).
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control"
ng-model="ctrl.userName"
name="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
ng-model="ctrl.password"
name="pwd" placeholder="Enter password" required>
</div>

I had this problem too. The answer was required syntax wasn't there.
So it was always valid to submit the form.

Remember.
if you are on angular 5 material design and using [ngModelOptions]="{standalone: true}" in input field make it false ==> [ngModelOptions]="{standalone: false}"

Related

Angular 2 template driven form group validation

I have a question regarding the angular 2 template driven form. I have set up one of this form and I would like to be able to give the user a warning display if one input in a form group is invalid.
For example, let's say I have the following form :
<form class="form" #f="ngForm" (submit)="submit()">
<div class="form-group">
<input type="text" name="firstName" required [(ngModel)]="user.firstName">
<input type="text" name="lastName" required [(ngModel)]="user.lastName">
</div>
<div class="form-group">
<input type="text name="address" required [(ngModel)]="user.address">
</div>
<button type="submit" [disabled]="!f.valid">Submit</button>
</form>
I would like the entire form-group that contains the input "firstName" and input "lastName" to change if either the firstName and/or the lastName is invalid. I know I could do something like that :
<div class="form-group" [class.has-error]="!firstName.valid || !lastName.valid">
<input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
<input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>
It will works just fine. But here is the tricky part : in this example I only have two inputs with a simple validation rule, so it's easy to check and still readable. But what if I have like 10 inputs to check in a form-group ? I don't want to end up having to manually check the validity of every inputs.
One of the solution I found is to create a subform inside the first one :
<form class="form" #f="ngForm" (submit)="submit()">
<form #subForm="ngForm" [class.has-error]="!subForm.valid">
<input type="text" name="firstName" required [(ngModel)]="user.firstName">
<input type="text" name="lastName" required [(ngModel)]="user.lastName">
</form>
<div class="form-group">
<input type="text name="address" required [(ngModel)]="user.address">
</div>
<button type="submit" [disabled]="!f.valid || subForm.valid">Submit</button>
</form>
Here is a plunker I created to illustrate :
form validation example
But I find it quite ugly, and I'm force to check the two forms to know if there is any problems. So finally my question is : can I set a div as a angular 2 ngForm to be able to validate multiple inputs at once ? Basically is there a better way to perform this kind of validation than creating a subform ? Something like that for example :
<div class="form-group" #names [class.has-error]="!names.valid">
<input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
<input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>
PS : I know using a function is another solution but it has the same drawbacks : you have to check manually every inputs, depending on the validation rule it can become quite tricky, plus you're losing one of the advantage of using template driven form instead of reactive ones.
Yeah, you can use the ngModelGroup directive for this.
<form class="form" #f="ngForm" novalidate>
<div class="form-group" #fgName="ngModelGroup" ngModelGroup="name" [class.has-error]="!fgName.valid">
<input type="text" class="form-control" name="firstName"
[(ngModel)]="user.firstName"
placeholder="first name"
required>
<input type="text" class="form-control" name="lastName"
[(ngModel)]="user.lastName"
placeholder="last name"
required>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address"
[(ngModel)]="user.address"
placeholder="address"
required>
</div>
<button class="btn btn-primary" [disabled]="!f.valid">Submit</button>
</form>

AngularJS UI Validate Password Fields

Trying to get Angular-ui-validate to work with my form with bootstrapcss
Here is the HTML
<div class='container' ng-controller='RegisterController as ctrl'>
<form class="form-register" ng-submit="ctrl.register()">
<h2 class=form-user-details">General Information</h2>
<div class="form-group">
<label for="inputEmail1">Email address</label> <input type="email"
class="form-control" ng-model='inputEmail' id="inputEmail1"
placeholder="Email" required autofocus> <span
style='font-size: 10px; color: red'>Note: Your email will
serve as your username!</span>
</div>
<div class="form-group" ng-class="{'has-error': !form.confirm_password.$error.validator}">
<label for="inputPassword">Password</label> <input name='password'
type="password" id='inputPassword' ng-model='password'
class="form-control" placeholder="Enter Password" ng-minlength="6" ng-maxlength="30" required>
<input type="password" class="form-control" name='confirm_password'
placeholder="Re-enter Password" ui-validate="'$value==password'"
ui-validate-watch="'password'">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Create
Account</button>
</form>
</div>
Link to angular-ui-validate https://github.com/angular-ui/ui-validate/blob/master/dist/validate.min.js
Link to example I saw:
password-check directive in angularjs
3rd example down
Seems easy enough but !form.confirm_password.$error.validator is always true without exception
Few things actually happened... First I am stupid and forgot to put ui-validate in my model dependencies...
Then I needed to add a ng-model to the confirm_password field...
And finally I needed to add the name form to my form.
Then it worked...

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>

How to validate one big form

I will try to explain my problem:
I have one form (I can make second, but i want to have one). And I want to validate the form Using HTML5 or by Jquery plugin for validation and the problem is:
One of the form-fields are for registred users and another one is for new users. So I need to detect valid form or focused? Because HTML5 wan to validate full form. How you are solving this problem? BTW: I'm using Bootstrap 3.
For Exp:
<div class="col-md-12 well">
<div class="col-md-6">
<form id="checkout-login" action="" method="post">
<h3>Existing User</h3>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="input-fancy" id="email" placeholder="E-mail" name="email" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="password">Heslo</label>
<input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
</div>
</div>
<div class="col-md-6">
<h3>New user</h3>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="input-fancy" id="name" placeholder="Name" name="name" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="surname">Surname</label>
<input type="text" class="input-fancy" id="surname" placeholder="Priezvisko" name="surname" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="input-fancy" id="email" placeholder="E-Mail" name="email" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="password">Heslo</label>
<input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
</div>
</div>
<input type="submit" class="btn btn-green btn-lg" value="Pokračovať"></input>
</form>
</div>
JQuery, please help me with ** and you can ignore //
$(document).ready(function () {
$("form").submit(function (e) { e.preventDefault() });
if(**find valid form){
$("**then $(this) is valid --> send").submit(function (e) {
e.preventDefault();
$.ajax({
url: '',
data: //my custom,
success: function (data) {
//Show Thank you
},
cache: false
});
});
}else{
//Show alert please register or login
}
});
Thank you for any answer, advice or comment.
here is the validation plugin jquery validate demo, i used it with bootstrap. It has lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 locales.
Code is available on https://github.com/jzaefferer/jquery-validation

How do I do form validation and conditional markup in angularjs?

How do I get the errors class/message to display using angular js and forms etc?
I tried this but it doesn't seem to validate at all:
<div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" ng-model="obj.title" required>
</div>
<div class="alert alert-danger" ng-show="obj.title.$invalid">
You are required to enter a name.
</div>
http://plnkr.co/edit/C6eU4pIS8FTfA59SCShh?p=preview
You have to wrap it inside a <form>, give the form a name and the input a name, then access the validity though formName.inputName
<form name="form">
<div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
<label for="name">Name</label>
<input type="text" name="title" class="form-control" id="name" ng-model="obj.title" required>
</div>
<div class="alert alert-danger" ng-show="form.title.$invalid">
You are required to enter a name.
</div>
</form>
Be aware that <form> is an instance of FormController in angular. That's where we have angular validation.
DEMO

Categories