Develop Reference

HTML text input RegEx validation not working even with required attribute

I am trying to have my dynamically generated text inputs only allow for digits and an optional decimal point in between. I am using the attribute but the inputs are still unresponsive to the RegEx.
var howMuch = $("<input>").attr("type", "text").attr("name", "howMuch").attr("pattern", "([0-9]+(\.[0-9]+)?)").prop("required", true);
The HTML generates like so: HTML
PLEASE do not mark this question as duplicate, none of the existing similar answers are already using the 'required' attribute

Pointy answer applies.
Also, pattern attributes only works at form validation time. In other words, user is able to type in whatever he wants. Only when he presses submit, pattern attribute is taken into consideration.
If you want a realtime feedback to user you should listen to change events and manually trigger the form validate method. Or you can use the keydown event to prevent some characters to be accepted as input.

Creating input text field on marked checkbox in JQuery

I was asked to do something particular, and after trying I eventually found this site https://codepen.io/elmahdim/pen/hlmri from which I'm using the JQuery. I however don't have any knowledge of it so I only understand in parts. What I'm trying to do is upon marking a checkbox an input type="text" appears below it, so if I check 3 results, input type="text"creates 3 fields, etc, and if I uncheck a checkbox, the camp gets deleted.
I've tried to do it by adding
$("div bb")
{
$('<input type="text" id="textbox" style="width:170px;"/><span> CHF <span>');
}
after $(".hida").hide();but as I have no knowledge of JQuery it obviously didn't work and I don't really know what now. Also before that input, is it possible to add some sort of variable that is "attached" to the input so I can specificy what that input is for? Like if I check "Mercedes" in the checkbox, the input type="text" is created and above it the name "Mercedes" then if I check "BMW" it makes another input type="text" with BMW written above it?
Also wruting the code like this $("div bb") { for some reason disabled the $. Not sure why.

One solution:
create an empty element in your html where the input fields
should appear (e.g. <div id="textfields"></div>)
find the "on-checkbox-click-event-handler", which happens to be this line in the jquery: $('.mutliSelect input[type="checkbox"]').on('click', function() {
add code to the handler at the correct location, to append/delete a text box (difficult if you don't know jquery at all). The correct location is where jquery looks for the "checked-state" of the checkbox. Use $().append() to create the text field and $().remove() to remove on unchecking the checkbox. Should be something like $("#textfields").append("<input type='text'/>"); you will need to add a class to the input field to later address it when removing.
Working pen:
https://codepen.io/anon/pen/gRdmXj
Happy coding!

Create an input field with a placeholder that gets written into upon text entry

I'm trying to create an input field for a phone number. I would like the placeholder to show the expected format/pattern: (XXX) XXX-XXXX as shown below.
Phone Number: <input type="text" name="phone" placeholder="(XXX) XXX-XXXX">
However, when the user starts entering numbers, I'd like them to simply replace the individual X's.
After inputting a few numbers the field would look like this (cursor after the 4)...
"(302) 4XX-XXXX"
And then the user entering backspace would simply replace the last number entered with an X again. After 2 backspaces...
"(30X) XXX-XXXX"
I've seen this behavior before in registration forms, but I haven't been able to locate any examples lately. I was hoping there might be a decent jquery plugin that accomplishes this, but I have not found it yet.

You can use a Mask, with jQuery:
jQuery(".maskPhone").mask("(999) 999-99999");
You can grab a plugin here: http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.js

The Masked Input Plugin will do what you want. http://digitalbush.com/projects/masked-input-plugin/

You may be able to use something like the Mask Input plugin in JQuery
http://digitalbush.com/projects/masked-input-plugin/
Or
http://digitalbush.com/projects/watermark-input-plugin/.

Pointing to first field after validation

I have a webpage which has check-boxes, input fields, dropdowns etc.,
Mandatory conditions are checked using javascript. If anyone fails to fill these fields and press next button validation errors popup.
Now what I want to achieve is when someone fails to enter information in the mandatory fields, the cursor should go to the first field which caused the error.
Can anyone suggest me how to do this?

Add a class (something like input-error) for every invalid field. Then use something like:
var errors = document.querySelectorAll(".input-error");
if (errors.length > 0) {
errors[0].focus();
}
Here's an example: http://jsfiddle.net/NtHzV/1/
It really all depends on the structure of your code, how you're validating, what you're actually doing with validation, and what your HTML is.
At the same time, if you're doing something similar to my example, you might as well keep track of the first input with an error, then focus() it at the end of validation. Something like this:
http://jsfiddle.net/NtHzV/2/
UPDATE:
Bergi pointed out that querySelector might as well be used (instead of querySelectorAll) because you're only looking for the first input with errors. So here's an update:
var error_input = input_area.querySelector(".input-error");
if (error_input !== null) {
error_input.focus();
}
http://jsfiddle.net/NtHzV/3/
Here's specs on querySelector: https://developer.mozilla.org/en-US/docs/DOM/element.querySelector - Note that < IE8 does not support it.
The use of ".input-error" is because that is the CSS class selector, and will find the first (if any) element in a specific area with the class "input-error".

This line will focus the page on the element you specify. You should be able to implement this into your validation checks to focus on the bad elements.
document.getElementById("ID_Of_bad_field").focus();

Grab text input as the user types

I'm trying to update a span tag on the fly with data from an input text field. Basically I have a text field and I'd like to be able to grab the user's input as they type it and show it to them in a span tag below the field.
Code:
<input id="profileurl" type="text">
<p class="url">http://www.randomsite.com/<span id="url-displayname">username</span></p>
JQuery:
var username;
$('#profileurl').keyup(function(username);
$("#url-displayname").html(username);
See it in JS Fiddle: http://jsfiddle.net/pQ3j9/
I'm guessing the keyup function is not the best way to do this. Since checking the key wouldn't be able to grab prefilled or pasted form input.
Ideally there is some magical jQuery function that can just output whatever info is in the box whenever it detects a key up but if that method exists I haven't found it yet.
EDIT: You guys are fricken amazing. It looks like .val() is that magic method.
Second question: How would you restrict input? Looking at the modified jsfiddle's, when a user inputs an html tag like < hr > the browser interprets it and breaks the form. Do you specify an array and then check against that? Does jquery have anything like PHP's strip_tags function?

$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
}).keypress(function(e) {
return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});
check out the modified jsfiddle:
http://jsfiddle.net/roberkules/pQ3j9/5/
Update: As #GregL points out, keyup indeed is better, (otherwise e.g. backspaces are not handled at all).

Similar to roberkules' answer, but using keyup() like you proposed seems to work better for me in a Chrome-based browser:
$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
});
Updated jsFiddle: http://jsfiddle.net/pQ3j9/3/

For the second question, if you wish to maintain characters and not have them parsed as html entities then you should do this instead :
$('#profileurl').keyup(function(key) {
$("#url-displayname").text($(this).val());
});
Check it out at - http://jsfiddle.net/dhruvasagar/pQ3j9/6/

You can bind multiple events with bind
http://jsfiddle.net/dwick/DszV9/