I need to select at least one checkbox and one radio button with remaining fields.
Here with out selecting checkbox it is allowing to submit and if I select one checkbox then also it not allowing.
Please me to validate this form with least one checkbox and radio button with remaining fields are required
JSFiddle
<form name="addUserForm" novalidate>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="email">Email:</label>
<input class="form-control" type="email" id="email" name="email" ng-model="addUserFormData.email" ng-pattern="^\S+#(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$" required placeholder="xxx#xxx.com">
<span class="error_text" ng-show="addUserForm.email.$error.required && addUserForm.email.$touched">Required</span>
<span class="error_text" ng-show="!addUserForm.email.$error.required && addUserForm.email.$error.email && addUserForm.email.$dirty">Invalid Email</span>
</div>
<div class="form-group">
<label for="username">Customer Name:</label>
<input class="form-control" type="text" id="username" name="username" ng-model="addUserFormData.username" ng-pattern="/^[\w -]*$/" ng-minlength="2" ng-maxlength="20" maxlength="20" required placeholder="Customer Name">
<span class="error_text" ng-show="addUserForm.username.$error.required && addUserForm.username.$touched">required</span>
<span class="error_text" ng-show="!addUserForm.username.$error.minLength && !addUserForm.username.$error.maxLength && addUserForm.username.$error.pattern && addUserForm.username.$dirty">Name must contain letters and space only.</span>
<span class="error_text" ng-show="!addUserForm.username.$error.required && (addUserForm.username.$error.minlength || addUserForm.username.$error.maxlength) && addUserForm.username.$dirty">Name must be between 2 and 20 characters.</span>
</div>
<div class="form-group">
<label>Role:</label><br />
<label class="radio-inline"><input type="radio" name="role" ng-model="addUserFormData.roleAdmin" ng-required="addUserFormData.roleAdmin || addUserFormData.roleUser">Admin</label>
<label class="radio-inline"><input type="radio" name="role" ng-model="addUserFormData.roleUser" ng-required="addUserFormData.roleAdmin || addUserFormData.roleUser">User</label>
</div>
<div class="form-group">
<label>Accessable To:</label>
<div class="clearfix"><!-- donot delete this -- clear both property --></div>
<div class="access_checkbox">
<label class="checkbox-inline">
<input type="checkbox" ng-model="addUserFormData.cStoreAnalytics" ng-required="addUserFormData.cStoreAnalytics || addUserFormData.cameraAnalytics || addUserFormData.wifiAnalytics">C Store Analytics
</label>
<input class="form-control mar_bot_5" type="text" ng-disabled="!addUserFormData.cStoreAnalytics" placeholder="Username">
<input class="form-control" type="password" ng-disabled="!addUserFormData.cStoreAnalytics" placeholder="Password">
</div>
<div class="access_checkbox">
<label class="checkbox-inline">
<input type="checkbox" ng-model="addUserFormData.cameraAnalytics" ng-required="addUserFormData.cStoreAnalytics || addUserFormData.cameraAnalytics || addUserFormData.wifiAnalytics" >Camera Analytics
</label>
<input class="form-control mar_bot_5" type="text" ng-disabled="!addUserFormData.cameraAnalytics" placeholder="Token Id">
</div>
<div class="access_checkbox">
<label class="checkbox-inline">
<input type="checkbox" ng-model="addUserFormData.wifiAnalytics" ng-required="addUserFormData.cStoreAnalytics || addUserFormData.cameraAnalytics || addUserFormData.wifiAnalytics" >Wifi Analytics
</label>
<input class="form-control mar_bot_5" type="text" ng-disabled="!addUserFormData.wifiAnalytics" placeholder="Username">
<input class="form-control" type="password" ng-disabled="!addUserFormData.wifiAnalytics" placeholder="Password">
</div>
<div class="clearfix"><!-- donot delete this -- clear both property --></div>
<p class="note_text">Make sure you have entered correct username and password</p>
</div>
<div class="form-group">
<label>Password:</label>
<input class="form-control" type="password" placeholder="Password">
</div>
<div class="form-group">
<label>Confirm password:</label>
<input class="form-control" type="password" placeholder="Confirm password">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" ng-disabled="addUserForm.$invalid" ng-click="addUser()" class="btn redcolor_btn"> <!--data-dismiss="modal"-->Add</button>
</div>
</form>
I think changing ng-required slightly will solve your problem.
So, instead of;
<input type="checkbox"
ng-model="addUserFormData.cStoreAnalytics"
ng-required="addUserFormData.cStoreAnalytics
|| addUserFormData.cameraAnalytics
|| addUserFormData.wifiAnalytics">
use this (apply same logic for all checkboxes):
<input type="checkbox"
ng-model="addUserFormData.cStoreAnalytics"
ng-required="!(addUserFormData.cStoreAnalytics
|| addUserFormData.cameraAnalytics
|| addUserFormData.wifiAnalytics)">
Related
Following is the html code. All I wanted to know if there are limits to putting html elements for form designing.
<div class="container">
<h1>Add New Employee</h1>
<br>
<form action="process.php" method="post">
<div class="form-group">
<label for="name">Full Name:</label>
<input class="form-control" type="text" name="name">
</div>
<div class="form-group">
<label for="permanent_address">Permanent Address:</label>
<input class="form-control" type="text" name="permanent_address">
</div>
<div class="form-group">
<label for="marital_status">Marital Status:</label>
<select class="form-control" name="marital_status">
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
<div class="form-group">
<label for="gender">Gender: </label>
<input type="radio" value="Male" name="train">Male
<input type="radio" value="Female" name="train">Female
</div>
This is where the problem starts.
This is the reason i've disable phone number by commenting it becasue it is disabling the submit button.
<!-- <div class="form-group">
<label for="phone">Phone number: </label>
<input class="form-control" type="number" name="phone">
</div> -->
<div class="form-group">
<label for="admission_date">Admission Date: </label>
<input type="date" name="admission_date">
</div>
<div class="form-group">
<label for="Aadhar">Aadhar Number: </label>
<input class = "form-control" name="Aadhar">
</div>
<button class="btn btn-success" name="submitted">Add New Hire</button>
</form>
</div>
your code seems to run fine. There are no limits to how many elements you can have in a form - possibly limited my memory. Why do you think your form isn't working?
also for phone input try the following:
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<div class="container">
<h1>Add New Employee</h1>
<br>
<form action="https://www.google.com" method="post">
<div class="form-group">
<label for="name">Full Name:</label>
<input class="form-control" type="text" name="name">
</div>
<div class="form-group">
<label for="permanent_address">Permanent Address:</label>
<input class="form-control" type="text" name="permanent_address">
</div>
<div class="form-group">
<label for="marital_status">Marital Status:</label>
<select class="form-control" name="marital_status">
<option value="Married">Married</option>
<option value="Unmarried">Unmarried</option>
</select>
</div>
<div class="form-group">
<label for="gender">Gender: </label>
<input type="radio" value="Male" name="train">Male
<input type="radio" value="Female" name="train">Female
</div>
This is where the problem starts.
This is the reason i've disable phone number by commenting it becasue it is disabling the submit button.
<div class="form-group">
<label for="phone">Phone number: </label>
<input class="form-control" type="number" name="phone">
</div>
<div class="form-group">
<label for="admission_date">Admission Date: </label>
<input type="date" name="admission_date">
</div>
<div class="form-group">
<label for="Aadhar">Aadhar Number: </label>
<input class = "form-control" name="Aadhar">
</div>
<button class="btn btn-success" name="submitted">Add New Hire</button>
</form>
</div>
<div class="container">
<h1>SignUp Form</h1>
<form>
<div class="form-group" >
<label for="name">Name</label>
<input type="text" class="form-control" [ngClass]="{'red-border':user.name.errors}" [(ngModel)]="user.name" [ngModelOptions]="{standalone: true}" id="name" required >
</div>
<div class="form-group">
<label for="pass">Password</label>
<input type="password" class="form-control" id="pass" [(ngModel)]="user.pass" [ngModelOptions]="{standalone: true}">
</div>
<div class="form-group">
<label for="cpass">Confirm Password</label>
<input type="password" class="form-control" id="cpass "required [(ngModel)]="user.cpass" [ngModelOptions]="{standalone: true}">
</div>
<div class="form-group">
<label for="dob">DOB</label>
<input type="date" class="form-control" id="dob" required [(ngModel)]="user.dob"[ngModelOptions]="{standalone: true}">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required [(ngModel)]="user.email" [ngModelOptions]="{standalone: true}">
</div>
<div class="form-group">
<label for="contact">Contact</label>
<input type="text" class="form-control" id="contact" required [(ngModel)]="user.contact" [ngModelOptions]="{standalone: true}">
</div>
<button type="button" (click)="validateUser(user)" class="btn btn-success" >Submit</button>
</form>
</div>
I am new to angular 2, i had tried required property in input tag,but its not working. Also i want to change the color when input in wrong. I tried it but i don,t get it how to do it. Here is the code.
give name to your input field like name="name" and then try this user.name.errors.required instead of user.name.errors
I have an Angular 5 app with a login form. On iOS version 11.3 with Chrome the form auto fills the email and password fields but the form fails validation.
However, this works fine in Safari on the same device.
It also works fine in all browsers on Android.
I have tried two different ways of creating the form and both have the same behavior.
Method 1
<ngx-loading [show]="isLoading"></ngx-loading>
<div class="row">
<div class="text-center col-12">
<h2 class="form-signin-heading">Please sign in</h2>
<form class="form-signin" [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input autofocus class="form-control" id="email" name="email" maxlength="100" placeholder="Email address" type="email" formControlName="email">
<div *ngIf="form.controls.email.touched && form.controls.email.errors?.required" class="text-danger">Required</div>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-control" id="password" name="password" maxlength="100" placeholder="Password" type="password" formControlName="password">
<div *ngIf="form.controls.password.touched && form.controls.password.errors?.required" class="text-danger">Required</div>
</div>
<button class="btn btn-lg btn-gold btn-block" type="submit" [disabled]="!form.valid || isLoading">Sign in</button>
</form>
</div>
</div>
Method 2
<ngx-loading [show]="isLoading"></ngx-loading>
<div class="row">
<div class="text-center col-12">
<h2 class="form-signin-heading">Please sign in</h2>
<form class="form-signin" name="form" (ngSubmit)="f.form.valid && submit()" #f="ngForm" novalidate>
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input autofocus class="form-control" id="email" name="email" maxlength="100" placeholder="Email address" type="email" [(ngModel)]="model.email" #email="ngModel" required>
<div *ngIf="f.submitted && !email.valid" class="text-danger">Required</div>
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-control" id="password" name="password" maxlength="100" placeholder="Password" type="password" [(ngModel)]="model.password" #password="ngModel" required>
<div *ngIf="f.submitted && !password.valid" class="text-danger">Required</div>
</div>
<button class="btn btn-lg btn-gold btn-block" type="submit" [disabled]="isLoading">Sign in</button>
</form>
</div>
</div>
I'm using Angular 4 to build a form and required attribute is not working. I tried adding <form ngNativeValidate>...</form> as suggested by many answers but i got :
Attribute ngNativeValidate is not allowed here.
Here is my code :
<form #f="ngForm" (ngSubmit)="submit()" ngNativeValidate>
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" type="text" [(ngModel)] = "email" name='email' placeholder="Email" required/>
</div>
<div class="form-group">
<button type="submit" class="btn btn-def btn-block">Submit</button>
</div>
</form>
try to replace this : <input class="form-control" type="text" [(ngModel)] = "email" name='email' placeholder="Email" required/>
with this : <input class="form-control" type="text" ngModel #email="ngModel" name='email' placeholder="Email" required/>
so all your code should look like this :
<form #f="ngForm" (ngSubmit)="submit()">
<div class="form-group input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" type="text" ngModel #email="ngModel" name='email' placeholder="Email" required/>
</div>
<div class="alert alert-danger" role="alert" *ngIf="!email.valid && email.touched" >
<span *ngIf="!email.valid"> This field is required</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-def btn-block">Submit</button>
</div>
</form>
Also remove the unnecessary ngNativeValidate and it should work now.
I have a form where the user has to choose between two modes, with two individual sets of inputs. Some inputs are required.
<form>
<div class="form-group">
<label>This or that?</label>
<div class="controls">
<label class="radio-inline">
<input type="radio" name="thisthat" value="this">
This
</label>
<label class="radio-inline">
<input type="radio" name="thisthat" value="that" checked>
That
</label>
</div>
</div>
<div class="this"> <!-- hidden as the page loads -->
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some of this" />
</div>
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some more of this" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="This again" />
</div>
</div>
<div class="that">
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some of that" />
</div>
<div class="form-group">
<input type="text" class="form-control" required="" placeholder="Some more of that" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="That again" />
</div>
</div>
<button class="btn btn-info" type="submit">Submit</button>
</form>
Example on CodePen
When the user fills out one part of the form the submit is prevented because of the empty fields in the other part.
How can I disable the validation for the fields in the hidden part? Preferably without removing the required properties of the hidden inputs.
Is there a default way to do this?