HTML text input RegEx validation not working even with required attribute - javascript

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.

Related

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.

Prevent user from chaning tokens within input box

How to prevent the change of certain elements, tokens, within a textarea with javascript or jquery? For instance I have this string in an input
this is normal text {this can't be changed 1}. This is more text. {This can't be changed 2 }. And some more text
If a user tries to change text within the curly brackets I want to prevent that from happening.
I thought of finding the indexes of the start and stop indexes of the tokens and when a user tries to change an element, I would see if it falls within that range.
Is there a different approach that I can use?
You could use a regular expression to read everything between {} into an array when the page loads. Then when the form submits do that same thing again and compare them to make sure they are the same.
You should build a regular expression that validates the validity of the text. on every keydown event in the textarea revalidate the regex and notify the user / prevent the keypress.
As text can also be changes in other ways (paste, autocomplete, etc.) you should also validate on change event of the textarea.

Javascript: input box - autocapitalize first letter but can override

I have a name input box. I would like to auto-capitalise the first letter of the name as the user types, but allow the user to override the change for names such as "de Salis".
I see here that this is impossible with CSS, because text-transform:capitalize; will capitalise every word and can't be overridden.
A .keyup handler can fix up the first letter as you type, and there are a bunch of solutions found here to do that.
What I can't see how the original capitalisation can be overriden easily. I guess I need a flag, but if the function is one that can be attached to multiple elements, where should the flag live? I could append a DOM element as a flag, but this seems pretty ugly.
A fiddle of the non-override model is found here.
Suggestions?
To have the input box show only the first capital letter, you can use the keyCode directly, as that is always in uppercase format.
That alone will alleviate the requirement for expensive regex and .replace() methods your using.
jQuery:
$('.auto').one('keyup', function(e) {
$(this).val(String.fromCharCode(e.keyCode));
});
Reference: jsFiddle
The following answer has been revised to include Tab Key requirements, clicking inside of input box and pasting via context-menu, using keyboard paste method (Ctrl + V), and directly typing into it. It does away with the character keyCodes so international support is acknowledged. The jQuery selector was obtained here.
RE-Revised: jsFiddle (Does not force capital letter on submit.)

jQuery prefil dashes in text field

I have a text field where a user inputs a value in the form of 2012-112233-123. I would like the dashes to be automatically added to the field as the input is entered.
I can implement a basic check on the keyup event that checks if the cursor is in the 5th or 12th position, but this causes issues when backspacing (dashes are re-added upon removal). If possible I would also like to ignore the user input if they decide to manually add the dash.
Is there an easy way of doing this, or a simple plugin I can use? Seems like a lot of code and checking for something that I would assume is a fairly common requirement.
Take a look at input masks.
This jQuery plugin looks good.
It allows you to do things such this:
jQuery(function($){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
There's even a callback available for when the input is filled.
I once used this plugin:
http://digitalbush.com/projects/masked-input-plugin/
for your need just define
$(".yourinput").mask("9999-999999-999");

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/

Categories

Resources