I'm trying to validate and IPv4 range in Aurelia as well as mask the value using aurelia-mask which you can find here https://github.com/ariovistus/aurelia-mask.
I have two inputs(StartIp and EndIP) for IPv4 IP address which should be validated against the following scenarios.
StartIP can't be greater than EndIP;
EndIP can't be smaller than StartIP;
Both should be valid IPv4 addresses;
As well I want to display those values as masked but aurelia-mask support only number masking not IPv4 addresses.
<div class="form-group">
<label for="startIp">Start Ip</label>
<input masked="value.bind:StartIp & validateOnChange; mask: 999.999.999.999;" class="form-control" id="startIp"
disabled.bind="disabled()">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="endIp">End Ip</label>
<input masked="value.bind:EndIp & validateOnChange; mask: 999.999.999.999;" class="form-control" disabled.bind="disabled()">
</div>
</div>
Related
I use single reactive form as insert and update operation in both case radio button needed to be checked - how can I fix this issue?
Here is the field I use
<div class="form-group">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<input type="radio" formControlName="reportheader" id="reportheader0" [value]="0" (change)="isRhChanged()" [(ngModel)]="reportSettingData?.header_option"> According to present format
</div>
<div class="col-sm-6">
<input type="radio" formControlName="reportheader" id="reportheader1" [value]="1" (change)="isRhChanged()" [(ngModel)]="reportSettingData?.header_option"> Will use a customized header
</div>
</div>
</div>
</div>
</div>
Error:
Parser Error: The '?.' operator cannot be used in the assignment at column 34
For the default value to be checked, I use this code in the component:
this.rForm.patchValue({ reportheader: '0' });
I am using formGroup for form validation in angular2.I am doing a validation for Phone Number.I want the validation message to be displayed only when user leaves the field/tabs out.Right now, the validations are working fine but the validation message appears even when I am focused to the field.
For ex.- If I try to change the phone number and make the digits equal to 10 , it throws error(though I have not tabbed out).I want the error to be displayed only when I tab out. Any idea what am i missing here.
<form [formGroup]="paymentDetailsForm">
<md-input formControlName="officePhone" placeholder="Primary Contact Phone" name="officePhone" [(ngModel)]="paymentform.officePhone" (blur)="registerChaseUser()" (keyup)="numberKeyed($event.target.value)" [restrictKey]="'^[0-9]+$'" noSpace="true" maxlength="14" required></md-input>
<span *ngIf="!paymentDetailsForm.controls['officePhone'].valid && (!paymentDetailsForm.controls['officePhone'].pristine || paymentDetailsForm.controls['officePhone'].touched || showPaymentError) && paymentform.officePhone.length == 0" class="validation validation-fix">This field is required.</span>
<span *ngIf="(paymentform.officePhone.length < 14) && (paymentform.officePhone.length > 0) && (!paymentDetailsForm.controls['officePhone'].pristine || paymentDetailsForm.controls['officePhone'].touched)" class="validation validation-fix">Please enter a full 10-digit phone number.</span>
</form>
Try using blur
<input (blur)="onBlur()" (focus)="onFocus()">
and then activate the message only if onblur was called.
you should try 'ngTouch'
instead of "|| paymentDetailsForm.controls['officePhone'].touched"
should write "&& paymentDetailsForm.controls['officePhone'].touched"
for example :
<form *ngIf="active" id="contactForm" (ngSubmit)="onContactSubmit()" [formGroup]="contactForm">
<div class="row">
<div class="col-sm-6 form-group">
<label for="first-name"> First Name</label>
<input class="form-control" type="text" formControlName="firstName">
<p *ngIf="!contactForm.controls.firstName.valid&&contactForm.controls.firstName.touched" class="alert alert-danger">
firstname is required
</p>
</div>
<div class="col-sm-6 form-group">
<label for="last-name"> Last Name</label>
<input class="form-control" type="text" formControlName="lastName">
<p *ngIf="!contactForm.controls.lastName.valid&&contactForm.controls.lastName.touched" class="alert alert-danger">lastname is required</p>
</div>
</div>
</form>
I am working on an ASP.NET MVC 4 Project. I want to style data validation errors on my login page with Bootstrap 3.0. When I debug the page and it gives data validation errors, this codes are disappeared in source of my login form:
<form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div> <div class="form-group control-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="User name alanı gereklidir." id="UserName" name="UserName" placeholder="Kullanıcı Adı" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="Password alanı gereklidir." id="Password" name="Password" placeholder="Şifre" type="password" />
<span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-default" type="submit">Giriş Yap</button>
</div>
</div>
</form>
How can I style these errors like "for=inputError" property of label with Bootstrap 3?
As it's shown in Bootstrap's docs, you need to apply class has-error to the div that contains the input and has class form-group:
<div class="form-group has-error">
...
</div>
It's a quite ugly to write a condition for each property you want to check and apply class has-error depending on the results of that condition, though you can do it like so:
<div class="form-group #(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">
This takes care of the server side validation. However, there is also client side validation you need to think about. For that you'd need to write some jQuery that would check for existence of class field-validation-error and apply class has-error depending on the result.
You may do it all your self, though I suggest checking out TwitterBootstrapMVC which does all of that automatically for you. All you'd have to write is:
#Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it in Bootstrap 2 is free. For Bootstrap 3 it requires a paid license.
I have problem with the Parsley.js Framework.
My Problem is that the password and password confirm have the same input, but I have a error message if click on the submit button.
Here my Testsite:
http://topkosmetikstudios.de/release/index.php?article_id=21
(german language passwort = password and password wiederholen = password confirm)
Here my Code:
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input type="password" data-equalto="#eqalToModel" name="passwort" data-required="true" <?php echo ($_POST['passwort'])? $_POST['passwort']:""; ?>>
</p>
</div>
<div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input type="password" data-equalto="#eqalToModel" name="passwort_w" data-required="true">
</p>
</div>
I use the Parsley.js parameter data-equalto="#elem" but it doesn't work.
Here the Parsley.js documentation: http://parsleyjs.org/documentation.html
Does anyone see a problem with my code that would cause this to not function?
It's possible you're using the wrong tag, as of Parsely.js 2.0:
data-parsley-equalto="#anotherfield"
If what you are attempting to do is make sure both password 1 and password 2 are the same before you submit the form then according to the documentation (http://parsleyjs.org/doc/#psly-validators-list) you need to set an id for the fields that you want to match against. And set field one to look for the id of field two and vice versa.
Equalto #2.0 data-parsley-equalto="#anotherfield" Validates that the
value is identical to another field's value (useful for password
confirmation check).
See the example code below:
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input id="passwort" type="password" data-equalto="#passwort_w" name="passwort" data-required="true">
</p>
</div>
<div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input id="passwort_w" type="password" data-equalto="#passwort" name="passwort_w" data-required="true">
</p>
</div>
For more on Parsley.js lookup their documentation.
Please mark this as an answer if this is what you were looking for. Thanks!
Try setting an id for the first password input (i.e. "password"), then set the data-equalto attribute of the second input to the same value (i.e. "#password") and it should work fine. If it does not work you might wish to check if parsley.js is loaded correctly. Hope this helps.
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input id="passwort" type="password" name="passwort" data-required="true" id="passwort">
</p>
</div> <div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input id="passwort_w" type="password" data-equalto="#passwort" name="passwort_w" data-required="true">
</p> </div>
data-equalto="#id_of_compare_field"
I'm using MVC4 but I imagine this is an issue for anyone using the new Bootstrap 3 version. Since form-control is now width:100% by default, what is the best practice for placing validation messages?
In version 2.x, placing the validation messages in the help-inline span just after the input control worked best to ensure that the message was placed to the right of the control.
But in version 3, they always get pushed to the bottom making all the controls shift down because the validation messages are forced under the control.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
<span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
</div>
</div>
I've considered manually setting them on a new column like this (below) but wondering if there was a more acceptable way or a less manual way of dealing with this.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
</div>
<div class="col-lg-5">
<p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
</div>
</div>
I wouldn't say there are "best practices" for presenting form validation errors. It's more of a personal design choice.
Depending on how much JS you want to write, you could get a little slick and insert an input group addon which holds an error message in a tooltip icon, like so...
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
Honestly though, I think messages appearing below input fields are fine, as long as they don't disturb page layout and push content down when they appear. (Which is just a matter of having a container that displays block and has a a hard-coded height.)