<section class="col col-6">
<label class="input">
<i class="icon-append fa fa-building"></i>
<input type="text" ng-model="customer.Name" name="customerName" placeholder="Customer Name" required>
<span style="color:red" ng-show="myForm.customerName.$dirty && myForm.customerName.$invalid">
<span ng-show="myForm.customerName.$error.required">Name Required</span>
</span>
</label>
</section>
How can i implement custom validation on it? m applying angularjs validation it works fine but I want custom valuation on this tag. I want user insert only alphabets in this textbox.
Use ngPattern directive and provide appropriate regular expression:
<input ng-pattern="/^[a-zA-Z]*$/" />
Related
I have a form:
<form action="/index.html" method="POST" id="form">
<div id="namediv">
Full Name:
<input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"/ id="name" required/></div>
<div>
Date:
<input type="date"/>
</div>
<div id="emaildiv">
Email:
<input type="email" id="email" onblur="validateEmail()" required/><br>
<emailerror class="invisible">Incorrect email address!</emailerror>
</div>
<div id="urldiv">
Favorite webpage:
<input type="url" name="favurl"id="url" onblur="validateFavURL()" required/><br>
<urlerror class="invisible">Incorrect webpage!</urlerror>
</div>
<div>
<input type="button" value="Validate" onclick="validateAll()"/>
</div>
</form>
How can I trigger the name's pattern validity without submitting the form? I tried checkValidity() but didn't succeed. What is the exact syntax for it?
Not sure that I clearly understand the question. But the problem appears to be invalid regex. But the field does say "full name" so you'd likely need to allow a space as well.
<div>
<label>This field accepts upper and lowercase letters only</label>
</div>
<input type="text" pattern="[A-Z][a-z]+" id="name" required/>
Right now I am using owl ng datepicker - as shown in the image(https://daniel-projects.firebaseapp.com/owlng/date-time-picker). But it is opening on input field click. I want it to be opened on datepicker icon click in my input box.
here is the html code for the same.
<input id="fromDate"
name="fromDate"
type="text"
placeholder="From Date"
class="form-control"
tooltip="From Date"
delay="500"
triggers=""
#fromDateToolTip="bs-tooltip"
(mouseenter)="fromDateToolTip.show()"
(mouseleave)="fromDateToolTip.hide()"
[(ngModel)]="fromDatePicker"
[owlDateTime]="dt1"
[owlDateTimeTrigger]="dt1"
readonly="readonly"
(ngModelChange)="dateFilter()"
(keydown.backspace)="clear()">
<owl-date-time
[pickerType]="'calendar'"
[startAt]="startAtFromDate"
[showSecondsTimer]="true"
(afterPickerClosed)="setFromDateSelected($event,dt1)"
(afterPickerOpen)="fromDatePickerOpen()"
#dt1>
</owl-date-time>
remove [owlDateTimeTrigger]="dt2" from input field and place it some where in icon field.
<div class="example-wrapper">
<h2>Trigger Picker by a Icon</h2>
<label class="example-input-wrapper">
Date Time
<input placeholder="Date Time:" [(ngModel)]="dateTime" [owlDateTime]="dt2">
<span class="example-trigger" [owlDateTimeTrigger]="dt2">
<i class="fas fa-calendar-alt"></i>
</span>
<owl-date-time #dt2></owl-date-time>
</label>
<h4>Value From Picker: {{dateTime}}</h4>
</div>
You can use the owlDateTimeTrigger property.
The date time picker that this trigger is associated with.
Try with this:
<input id="fromDate" placeholder="From Date" ... [owlDateTime]="dt1 [owlDateTimeTrigger]="dt1">
<span [owlDateTimeTrigger]="dt1"><i class="fa fa-calendar"></i></span>
<owl-date-time [pickerType]="'calendar'" [startAt]="startAtFromDate [showSecondsTimer]="true" (afterPickerClosed)="setFromDateSelected($event,dt1)" (afterPickerOpen)="fromDatePickerOpen()" #dt1></owl-date-time>
I used to implement an Angular 2/4 application with Bootstrap 3 and used the Reactive Forms approach. I had a field-validation where the border of the input-field turned red and an error message appeared under the field in red font color.
it looks like this:
<div class="form-group row"
[ngClass]="{'has-error': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" />
<span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
Now i have to use Bootstrap 4 and neither the error message or the input-field turns red. How do i realise this? I tried to change the class of the parent span-block to "form-text" but it didn't work.
For beta version of Bootstrap v4, you can check out Form validation docs. There you can read about the new way, supported by all modern browsers for HTML5 way of form-validation with valid/invalid css classes. There Bootstrap uses the .was-validated and .invalid-feedback classes for what you want to achieve (see code snippet).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("needs-validation");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
</script>
If you want something more similar to Bootstrap 3, you can use what they call server-side validation, as it is written:
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
Previous answer for alpha version of Bootstrap V4 (if you must use this).
On Bootstrap V4 Form Validation Docs there is the following example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
So i think you just need to change the has-error class to has-danger
This is the solution:
<div class="form-group row">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
[ngClass]="{'is-invalid': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" >
<span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
i needed to put the [ngClass]into the input-tag. Then i had to define the class as is-invalid and set the parent span-class to invalid-feedback
i know that your question is for long time ago, but it is the best way to validate the form-control input field by reactive form technique and bootstrap 4 to display the validation. first you need to write some code for your form :
in html section:
<form [formGroup]="myForm">
<div class="form-group">
<label for="name">first Name: </label>
<input type="text" class="form-control" formControlName="firstName" id="name">
<div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
<div *ngIf="firstName.errors.required">filling name is required!</div>
</div>
</div>
in ts file, you should implement the logic to conduct the validation.
in ts file:
myForm = new FormGroup({
'firstName':new FormControl('',Validators.required)
})
//getter method
get firstName(){
this.myForm.get('firstName');
}
now you can see that the validation is working. now to give style to input field to show the red border around the invalid input, just go to css file of component and add this class to the css file:
.form-control.ng-touched.ng-invalid{border:2px solid red;}
and simply you can see the result.
We have built a site with a login page - login page is a simple form in field sets - annoyingly when using an iPad the keyboard is triggered whenever pressing the button - it stays active as the next page is loaded - i can understand why - following is the form code - is there any way to disable this functionality?
<section>
<h3>Login</h3>
<form method="post" action="/Login" novalidate="novalidate" _lpchecked="1"> <fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_UserName">User Name</label>
<input type="text" value="" name="FormModel.UserName" id="FormModel_UserName" data-val-required="Please provide your User Name" data-val="true" aria-required="true" aria-describedby="FormModel_UserName-error" class="input-validation-error" aria-invalid="true">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.UserName" class="field-validation-error"><span id="FormModel_UserName-error" class="">Please provide your User Name</span></span>
<img alt="Icon: Person" src="/css/img/icons/icon-user.svg">
</label>
</fieldset>
<fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_Password">Password</label>
<input type="password" name="FormModel.Password" id="FormModel_Password" data-val-required="Please provide your Password" data-val="true" aria-required="true" class="input-validation-error" aria-describedby="FormModel_Password-error">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.Password" class="field-validation-error"><span id="FormModel_Password-error" class="">Please provide your Password</span></span>
<img alt="Icon: Pencil" src="/css/img/icons/icon-pencil.svg">
</label>
</fieldset>
<div data-valmsg-summary="true" class="validation-summary-errors"><ul> <li>Please provide your User Name</li><li>Please provide your Password</li> </ul></div> <fieldset>
<button class="button" name="submit" type="submit">
<i class="key"></i>
<span>Login</span>
</button>
</fieldset>
<!-- Javascript detection -->
<span class="result-login" id="result"></span>
You could try to disable native, default submit process and do submiting with js,, something like this:
document.getElementsByClassName('button')[0].onclick = function(e){
e.preventDefault();
document.getElementById('frm1').submit();
}
see the code here, I changed some tag names, look the html pane also..: http://codepen.io/mkdizajn/pen/EgmPQR?editors=1010
I can't see this live and test but I hope that helps..
I have a simple form with a date validation which works fine:
The problem is that when the validation kicks in, the "End Date" label gets misplaced as you can see (is above the date field box/calendar):
The code related is the following (it's just a form):
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Is there any way to "pack" the form or any way to stop this happening?
Any hint please?
Thanks everyone