I am using html 5 for mobile development in Icenium.
I want to do validation so I used required attribute along with title attribute to show messages to user.
But once I do enter correct input into the specified fields that title messages should get remove; as it won't be appropriate to show messages to user once they enter appropriate values.
I want to remove titles form fields after validation, is there any way for this?
<li>
<label>First Name:
<input type="text" data-bind="value: firstName" required title="Please Enter your First Name">
</label>
</li>
<li>
<label>Last Name:
<input type="text" data-bind="value: lastName" required title="Please Enter your Last Name">
</label>
</li>
<li>
<label>Email:
<input type="email" required title="please enter your email" data-bind="value: emailAddress" autocomplete="off">
</label>
</li>
Try this:
<li>
<label>First Name:
<input class="txtCheck" type="text" data-bind="value: firstName" required title="Please Enter your First Name">
</label>
</li>
$('.txtCheck').on('blur keyup', function(){
if($(this).val() == "yourvalue"){
$(this).removeAttr('title');
}
});
If you want to rely on HTML5 functionality, then I’d suggest making use of the constraint validation API.
element.willValidate, element.validity.valid or element.checkValidity() are what you could query upon the blur event (or change, keyup, whatever) to see if a certain element is currently in valid state or not.
Related
I need someone to please tell me how to remove this auto-suggested text below the input field. I have tried autocomplete="off" , autocomplete="false". I've also placed <form autocomplete="off"></form> in form tag.
Anyone with a solution please help.
<div class="col-md-6">
<div class="form-group">
<span class="label">Enter Postal Code</span>
<input type="text" class="form-control" id="search_input" autocomplete="off" placeholder="Type postal code ..." required>
</div>
</div>
Here you can see which browsers support the autofill attribute CaniUse. Here is a simple work around from this source: Turning off form-autocompletion.
You can work around with autofill="new-password"
"If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password"."
<form method="post" action="/form">
<div>
<label for="cc">Enter Postal Code:</label>
<input type="text" id="cc" name="cc" autocomplete="new-password">
</div>
</form>
Lastly, instead of pairing a <span> with the input element, it is common practice to use the <label> element. Please read more here label
Apply autocomplete="off" to your form not the input box.
I am making a simple template-driven form with 'Email Validation' in it (Not by Reactive Forms). So, required, minlength, maxlength are working fine. But, when I try email to be valid, its failing. Can someone help me out?
abc.component.html
<form #customForm="ngForm" (ngSubmit)="alpha(customForm)">
<input type="text" name="firstName" ngModel #firstName ="ngModel" required minlength="3" maxlength="10"><br/>
<div *ngIf="firstName.touched">
<p *ngIf="firstName.errors?.required">First Name is Required!!!</p>
<p *ngIf="firstName.errors?.minlength">First Name minimum 3 characters are required!!!</p>
<p *ngIf="firstName.errors?.maxlength">First Name max length is 10!!!</p>
</div>
<input type="email" name="email" ngModel #email="ngModel" required><br/>
<div *ngIf="email.touched">
<p *ngIf="email.errors?.required">Email is a required field!</p>
<p *ngIf="email.errors?.email">This is not a valid Email!!!</p>
</div>
<button type="submit" [disabled]="customForm.invalid">Submit</button>
</form>
Note: Though required validation of email is taking place, but as the
pattern or data entered is not correct, the 2nd validation in email
validation div must give error.
Result: (Email valid and its pattern not automatically giving error)
You could add an email attribute to your Email Input. But then that would not in-validate it for something of the pattern xxx#xxx which I think would not be a valid email in your case.
I suggest you use pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" instead. Then, where you're showing the error message, you should check for email.errors?.pattern instead.
Give this a try:
<input
type="email"
name="email"
ngModel
#email="ngModel"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$"
required>
<br/>
<div *ngIf="email.touched">
<p *ngIf="email.errors?.required">Email is a required field!</p>
<p *ngIf="email.errors?.pattern">This is not a valid Email!!!</p>
</div>
Try both the approaches on this Sample StackBlitz and use the one that suits you better.
Replace this line
<input type="email" name="email" ngModel #email="ngModel" required>
with
<input type="email" name="email" ngModel #email="ngModel" required email>// add email attribute
use "pattern = regrex" in input tag and use validation email?.errors?.pattern
I have an doubt in my Register form incase i enterthis is correct format but fake id it is Acceptable my form .Any idea to Avoid to this problem....And Also I use the following code for name field text box it Allow many space i Want Only One Space in that text-box ... Any Idea?
<input type="text" class="form-control" id="name" name="name" placeholder="Name" onkeyup="this.value=this.value.replace(/[^a-zA-Z ]/g,'');"required>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" onkeyup="this.value=this.value.replace(/[^a-zA-Z ]/g,'').replace(/\s\s+/g, ' ');"required>
I have one registration form in my site in which I am saving fields and after saving the form when user again come back to that registration form I want previous field values to be saved in browser auto-fill.
below is my code snippet -
<form class="clearfix">
<input autocomplete="given-name" name="firstName" type="text" placeholder="Enter First Name" class="form-control" value="">
<input autocomplete="family-name" name="lastName" type="text" placeholder="Enter Last Name" class="form-control" value="">
<input autocomplete="email" name="email" type="text" placeholder="Enter Email" class="form-control" value="">
<input autocomplete="tel" name="phoneNumber" type="text" placeholder="Enter Number" class="form-control contactMask" value="">
<input autocomplete="address-line1" name="addressLine1" type="text" placeholder="Street 1" class="form-control">
<input autocomplete="address-line2" name="addressLine2" type="text" placeholder="Street 2" class="form-control" value="">
<a href="javascript:void(0);" className="btn baseBtn primeBtn" onClick={this.signupUser}>Sign Up</a>
</form>
In this code onClick of anchor tag I am doing ajax call via signup user function.
and after that i want that users data to be auto filled in browsers autofill address in chrome.
I have tried below ways : -
1.Few people suggested to use form "submit" button functionality to save data in autofill rather than having ajax call form anchor tag onClick event.
but that is also not working in my case.
2.I have gone through few post in which they told to use proper name and autocomplete attribute for field. but by using that browser can only guess proper field values .
I am answering my own question.
Actually,I just ignored that I am not directly submitting my form.
On backend we are using grails and using it just for REST API's.
on frontEnd we have react.js but request and response are getting served from Nginx .
So form is not getting submitted to grails that's why on form submit data was not getting saved in browser autofill.
I validate my form using jquery validate .It is working fine .
http://jsfiddle.net/cRew4/2/
When you change focus one field to and another it gives error.
Now I will implement tooltip in that,so I add tittle in all input field as example "title="title"" it show tooltip but it removed validation of that field.Instead of showing error it show title of the input field. why ?
http://jsfiddle.net/cRew4/3/
$("#commentForm").validate();
$(document).tooltip();
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" title="title" type="text" required/>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required/>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url"/>
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
I need it show tooltip when there is mouse over on the field .but it show validation error when user fill incorrect value intead of tooltip message
The validate takes title by default.
So, you must add ignoreTitle arguement to it.
JS
$(document).tooltip();
$("#commentForm").validate({
ignoreTitle: true
});
The documentation mentions it, look here : http://jqueryvalidation.org/validate/
JSfiddle Demo