Develop Reference

On registration form , form fields are not getting saved in browser auto fill on submit .(ReactJs)

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.

How to stop browser from asking to save email and password in sign up form?

I am creating a sign up form in PHP. Every time I click on sign up button the browser asks to save the email and password. How can I stop this?

As of April 2016, this is browser-level behaviour and the user's reponsibility to control.
Two things you can do are:
You can inform the user on how to prevent this message displaying and
File a complaint with the browser devleopment team to urge them to change the behaviour. If enough people want it changed then it will be changed.

You can use autocomplete="off" on input fields like this
<input type="text" name="Username" autocomplete="off">
<input type="password" name="Password" autocomplete="off">
or on the form tag. May not work on all browsers.
Please refer to http://caniuse.com/#search=autocomplete on supported browsers.

This code solves my issue. I have just add
readonly onfocus="this.removeAttribute('readonly');"
besides
autocomplete="off"
And input should look like this
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >

Add attribute autocomplete="off" in form tag
-----

How to use Twitter Boootstrap's form validation tooltip messages?

First of all, I am not asking about using Bootstrap's javascript guide to write tooltips from scratch which is in the docs.
I recently used type="email", along with v3.3.1. It automatically validated and showed awesome tooltips for wrong email. I am looking to extend this to custom fields (type="text" and so on) with least amount of code. Looking at Bootstrap's docs, I didn't find any such documentation.
I am wondering it I can use something that resembles formvalidation.io for validation without writing a ton of javascript combined with above tooltip style.
I can do javascript, but if there's a better way, I would like to know.
Right now, my form is extremely simple, no tooltip Javascript and this works:
<form ng-submit="submit()">
<!--<input type="hidden" name="_token" value="{{ CSRF_TOKEN }}">-->
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" ng-model="data.email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="data.password" id="exampleInputPassword1" placeholder="Password">
</div>
</form>

you can change/edit the message of the tooltip using pattern
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Enter a letter from the english alphabet ')"
onchange="try{setCustomValidity('')}catch(e){}" />
Good Link on patterns right here: it has time and a lot of data types patterns

If you use type="email" the tooltips you see are generated by the browser.

Onclick function not working with CFINPUT validation

I am trying to validate the fields using CFINPUT and then calls a popup window function to do more stuff BEFORE submitting the form but it's not working. The onclick function seems to take precedent over the CFINPUT validation. As soon as I click on the Submit button it's calling the popup window function first without validating the fields. I need it to:
first validate the fields
call the popup function
then submit the form after the popup closes itself
(p.s. I see other similar case on here but there is no answer given)
The code looks like this:
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
....
<input type="submit" value=" Send " onclick="popup()">
....
Please help. Thank you.

This is an old blog posting so not sure how accurate things are today but it shows how you can run the CFFORM validation via the _CF_checkTaskForm() function. So it seems like if you change the submitting of the form to a button via <input type="button" value="Send" onclick="popup(this.form)" /> then change the popup function to first validate the form via the _CF_checkTaskForm() and if that passes to proceed with the other JS you are doing.
http://www.neiland.net/blog/article/triggering-cfform-validation-when-using-ajax/
To expand on that, I just looked at a CF8 and CF11 installations and looks like the function in those is _CF_checkCFForm_1 if using that version of CF then something like this should get you in the correct direction:
<script>
popup = function(formreference) {
var check = _CF_checkCFForm_1(formreference);
if (!check) {
//if the rules failed then do not submit the form
return false;
} else {
// Do the popup
}
}
</script>
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
<input type="button" value=" Send " onclick="popup(this.form)" />
</cfform>

The cfinput validation you're attempting to do is the client-side equivalent to
<cfif len(trim(string)) gt 0>
(Edit: That is not to imply that you should depend wholly on client side validation. Client-side validation is more of a feature to help your visitors. Server side validation is still important.)
Which I have to say is really weak validation. Anything consisting of at least 1 non-whitespace character will pass the test. People will be able to have usernames like "!" which isn't fanstastic, but that's just some information.
On the jQuery Validate link you provided, they show an example form (along with a link of the same form in action)
<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" 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>
<script>
$("#commentForm").validate();
</script>
This very basic example shows how simple Validate can be to install, and a simple format of
<input name="ele" type="text" required>
is exactly the same level of validation you're attempting. So, to begin with, you can almost copy and paste the code. (Aside from from the different requirements you can make, setting minlength requires a certain number of characters and requires that at least one not be whitespace).
jQuery Validate can get quite extensive but is very easy to basically install and once you become familiar, make custom classes as needed
As a final note, don't disregard the disdain for CFForm elements. It may seem like others are disregarding your question, but that's not the case.
To be honest, they began to be introduced at a different time in the life of the internet, but have always been kind of finicky to work with. Expansion to them, in the opinions of many, have not been done well and have frequently exasperated the flaws.
It's super attractive to be able to say <cfinput...required> but the tags become a nuisance and you don't easily have the fine control over them that you might desire. They're a crutch, and a rusty crutch at that.
You might check out CFUI The Right Way # Github or this hosted version for some great insight and examples.

With jQuery Mobile forms, where do i put the validation message?

According to the jQuery Mobile docs, this is how you set up fields in a web form:
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
Is there a best practice or "official" way of adding a validation message to this? I basically want the validation messages to appear under each textbox in my form.

I haven't seen any "official" way of supporting input-validation fields. What we're currently doing though, is using the combination of:
jquery.validate
jquery.unobtrusive.js (not a pre-requisite)
asp.net mvc3 w/ Fluent validation (not a pre-requisite)
Here's an example of what the input-validation looks like for a single field:
<label for="Name" class="ui-input-text">Name Input:</label>
<input data-val="true" data-val-required="Name is required" id="Name" name="Password" type="text" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d">
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
jquery.validate then takes care of inserting and displaying the correct message in the validation span. It doesn't support html5 input field-types yet, but I have a branch on github with the necassary changes to support this.