Develop Reference

Email id and name field verification use js

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>

generic solution for ngdisabled with required field only

So, I am starting with a requirement of disabling submit button if the required field is not being filled.
<form name="form">
<input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/>
<input type="text" placeholder="First Name" data-ng-model="model.lastName" name="lastname" ng-required="true" /><br/>
<button type="button" ng-disabled="form.$invalid">Submit</form>
So far so good. However, if there are additional validation field as follow, the above will not work as the requirement is to only disable submit button if the required field is not being filled only regardless of other validation.
<form name="form">
<input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" ng-minLength="5" /><br/>
<input type="text" placeholder="Last Name" data-ng-model="model.lastName" name="lastname" ng-required="true" ng-minLength="3" ng-maxLength="10" /><br/>
<button type="button" ng-disabled="form.$invalid">Submit</button>
</form>
I could have wrote a bloated solution independently $watch the changes of each of the input value for each and every form in controller, but it is tedious and not reusable. What am i expecting is something more generic as follow:
<button type="button" ng-disabled="!form.$required">Submit</button>
Perhaps I missed out something/some existing function that is already available. But I think that to disable submit button until all required field is being filled is something very common for UX/UI.

AFAIK there is no easy solution like you have mentioned, You can write a directive including form directive and set a flag in form(by watching the ng-required form fields)
Or, in controller with form have a scope function like
function disableSubmit() {
return form.FirstName.$error.required || form.LastName.$error.required;
}
<button type="button" value="SAVE" ng-disabled="disableSubmit()">Submit</button>
Adding the #kubuntu's jsFiddle here.
http://jsfiddle.net/3eqz2/421/

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 would the action url of an html form appended to a new window in javascript change?

I want to send a popup to a user if the user is not logged into my forum.
So far it works as far as appending the HTMl form to the new window created in Javascript; however, when I press the actual submit forms via the new window I get the basic 404 even though I use absolute URLs.
Here's the basic Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var myWindow = window.open("", "MsgWindow", "width=500, height=500");
myWindow.document.write('<h1>Already have an account? Login here!</h1><br> <form method="post" action="sportsboard.netai.net/page.php?page=login&&do=login&&formdisplay=false"> <label for="username">Username:</label><input type="text" id="username" name="username" size="35"><br> <label for="password">Password:</label> <input type="password" name="password" id="password" size="35"><br> <input type="submit" name="login" value="Login &gg;"> </form> <hr><br> <h1> or Signup and get started talking!</h1> <form method="post" action="sportsboard.netai.net/page.php?page=register&&do=register&&formdisplay=false"> <label for="username">Username:</label><input type="text" id="username" name="username" size="35"><br> <label for="password">Password:</label> <input type="password" name="password" id="password" size="35"><br> <label for="email">E-mail: </label> <input type="email" name="email" id="email" size="35"><br> <input type="submit" name="register" value="Register &gg;"> </form>');
});</script>
...and here's a basic link to a test page http://www.sportsboard.netai.net/Scripts/login.php?test=yes
If you press the submit buttons on there you'll be redirected to my testing free host's 404 page not found.
How do I make the form submit as if it were on a regular page?

My guess would be you are using absolute urls incorrectly. Since, you didn't prefix your form post action with http://www. it is attempting to post it to the local relative path. Try this:
action="http://www.sportsboard.netai.net/page.php?page=register&&do=register&&formdisplay=false"

The answer is as sctskw said! The action tried to search for the URL locally, so I added the http://www. to correctly direct the URL.

HTML creating an onsubmit redirect

I am trying to redirect the user to a new page on the current website once the form is submitted to another url.
I've looked at so many boards to figure out the best way. I cannot modify the destination URL for posting so I was thinking that the onsubmit function would work best to redirect the user to another page. But for some reason I can't figure out how to get the redirect to work.
Here is the code that I have right now:
<form method=post onSubmit="window.location.href='https://thankyoupage.com/'action="https: //urltopostto.com?encoding=UTF-8"><input type="hidden" name="inquiry_from" value="website" />
<fieldset><legend style="display: inline !important;">We Can't Wait to Hear from You</legend>
<div><label for="first_name">First Name*</label>
<input id="first_name" type="text" maxlength="40" name="first_name" required="" size="20" /></div>
<div><label for="last_name">Last Name*</label>
<input id="last_name" type="text" maxlength="80" name="last_name" required="" size="20" /></div>
<div><label for="email">Email*</label>
<input id="email" type="email" name="email" required="" size="20" /></div>
<div><label for="phone">Phone*</label>
<input id="phone" type="tel" name="phone" placeholder="(111) 111-1111" required="" size="20" /></div>
</fieldset>
<fieldset><legend>Company Information</legend>
<div><label for="company">Organization Name*</label>
<input id="organization" type="text" maxlength="40" name="organization" required="" size="20" /></div>
<div>
</fieldset>
<fieldset>
<div><label for="Inquiry">Can you provide us additional information?</label>
<textarea id="inquiry" maxlength=""256" name="inquiry" rows="6" wrap="soft"></textarea> </div>
<section><input type="submit" value="Submit" /></section></fieldset>
</form>

So, you are trying to redirect to another page (for example, "/page1"), when a user submits a form which will be posting the form data to a page (for example, "/page2"). Is this correct?
If you own the page2 meaning your server is serving up the page, then you can basically handle the redirect to page1 there.
However, if you don't own the page, you can use AJAX to post the form data to the page2 AND THEN redirect to page1 within your page using jQUery
$(document).ready(function () {
$('#submit_button_for_the_form').click(function (e) {
// Don't do the regular form POST
e.preventDefault();
// Get form variables...
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
...
// Post the form variables to page2
$.post('/page2', {
first_name : first_name,
last_name : last_name,
...
});
// redirect to page1
window.location = '/page1';
});
});

I'm not certain that I understand the question correctly. Wouldn't that be done rather easily, and better from the file you're posting to? (https://urltopostto.com)
You say you cannot modify the destination url. Does it mean that you cannot add anything to the destination file as well?
You could send the user directly to the thank you page and then submit the form data from behind the scenes. This would be a$$-backward and you'll have to be very careful to warn the user if things don't work (which would be some funky UX) but it would work.
There are many questions here. The best would be to do work with the file you're posting to.