Develop Reference

Is there a way to copy validation from one input to another with JavaScript?

I have a client who wants me to punctuate all currency inputs with commas and dollar signs. This means that I have to use a text input instead of a number input, which means that I cannot take advantage of the inbuilt validation that number inputs have, chiefly min, max, step, and simply validating that what the user enters is in fact a numeric string. My idea is therefore to create a text input copy of the actual numeric input, hide the actual one, format the contents of the text input as the user types, and copy them over into the hidden numeric input so that they can be validated and submitted from there. What is the best way with javascript to display any validation errors that might pop up from the hidden number input? I am specifically looking at the constraint validation api:
https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation
Here's the example html:
<!-- hidden actual input field -->
<input id="real" name="cost" type="number" min="0" max="1000" step=".01" style="display:none;" />
<!-- visible, fake, punctuated input field -->
<input id="punctuated" type="text" />
So I am wanting to find a way to take any validation objects in the DOM for the first input and copy them over to the 2nd. I have tried this so far (see below), but it appears that the validity and validationMessage DOM properties are readonly:
var punctuated = document.getElementById('punctuated');
var real = document.getElementById('real');
punctuated.validationMessage = real.validationMessage;
punctuated.validity = real.validity;

First option: To add the same class to both inputs and use document.getElementsByClassName('some-class')
Second option: To use a single input and on (keyup) call the validation function which will check if the user input matches the regex you need

This appears to be the answer:
punctuated.setCustomValidity(real.validationMessage);
I just bound that to the page load, and a click and keyup event for the punctuated input, and it seems to work. So when the user types stuff into the punctuated input, it gets copied over to the real input and validated using the html attributes, and then the click and keyup events pass the validation message to the punctuated input.

Preventing users from entering non-digits in input text field with HTML5

I have an input field of type text. Users should only be allowed to enter digits in the field. If they attempt to enter a non-digit, like a character, it should be ignored and not display in the field ( and not submitted to the server). I thought I could achieve this with the HTML5 pattern attribute:
<input class="form-control" data-remote="true" data-url="/contacts" data-method="put" pattern="^[0-9]*$" type="text" value="123456" name="contact[phone]" id="contact_phone">
But it doesn't work as expected. I can still enter any character into the field. There is no form submit button here. As soon as they tab out of field, the ajax call is made.
How can I achieve what I want with html5?

So you can totally do that by adding type="number" to your input field, It'll work in most browsers.
I'd recommend using sort of regex and a bit of JS to evaluate the input and then replace the input with permitted characters.
var phone_input = document.getElementById('contact_phone');
function validDigits(n){
return n.replace(/[^0-9]+/g, '');
}
phone_input.addEventListener('keyup', function(){
var field = phone_input.value;
phone_input.value = validDigits(field);
});
Here's a quick codepen
I'd also put a bit of validation on the model, just in case someone bypasses the JS.

I think it won't work with plain html5 since the pattern goes into affect after you submitted the form (It will make validation fail). But since you are already using js, you can just do it with for example the jQuery.keypress() function.

javascript/jquery input validation

I have form where a user can add more input boxes on button click.
User can have as much input boxes as they want.
I do not plan to add a button for removing fields.
They default number of input boxes is 2.
Say the user decides to add 3 more, now there are a total of 5.
For validation, I would like to check if the input box is empty or if the input has all spaces like: " " no matter how many spaces as long as it has nothing else but space.
I can do the check for an empty input by checking length, but how can I check for the latter?
Is there a regular expression for any number of consecutive spaces?
Thanks!
PS: I am using jQuery with jQuery mobile

You can check if an input field is blank by checking its .value.length, as you already know. To check if it only contains whitespace, then try this: (assuming that the input is stored in a variable called input)
if (!input.value.trim().length) // oh noes! it's blank or whitespace-filled!
Reference.

Your question has a few components:
how to add input fields dynamically?
how to loop through these fields and validate them as well?
how to check whether a field really contains content, not just empty values?
We need to address all of these issues in a systematic manner:
Starting with the easiest - detecting empty string:
if (value.replace(/\s/g,'')=='') //string is empty
Next, to add input fields dynamically:
var myinput=document.createElement('input');
document.body.appendChild(myinput);
//the trick here is to "remember" this element for later use
document.myinputs=[];
document.myinputs.push(myinput);
To check all your input fields, you check the static ones first, then loop through the dynamic input fields:
valid=true; //default to true unless detected otherwise
for (var i=0;i<document.myinputs.length;i++){
var input=document.myinputs[i];
if (input.value.replace(/\s/g,'')=='') valid=false;
}
alert(valid);

PHONE VALIDATION: How To Overwrite Text In a Textbox When Typing Without Clearing Whole Field?

I would like to know how to create a script that overwrites text that is already in a text box. (in jquery or javascript)
Example: If I have a text phone field that says:
+1 (xxx) xxx-xxxx
When a user clicks the field, I want the characters to remain, and the focus set to the 4TH character in the text box, just after the 1.
Then, as a user types each number, it overwrites the x one by one, until all the x's are gone. But, I want the parenthesis and hyphen formatting to stay, so the users input forms around the formatting.
I would also like this form to only allow numbers, hyphens, and parenthesis, and not allow submitting if x's still exist.
If you can help me with this, THANK YOU! :-)

Try masked input plugin # [
http://digitalbush.com/projects/masked-input-plugin/
]1
Looks like it matches what you need.

Allow only certain characters

I'd like to block all characters from being inputed except 0-9,a-z,A-Z range only alphanumeric characters. So when someone types ! for examplee nothing is written into input. How can I do that?

You need to write a function that listens for the onkeypress event for the form field, then check to see if the form contains any unwanted characters, and if it does, you update the field with those characters removed.

Or maybe you can use Alphanumeric Plugin for jQuery :
$('#yourInput').alphanum();