This is my first post and i think the answer is very easy but i don't get it:
I (try) to build a shopify store but i have to make some modifications and here is the point at where i am stuck:
On my Product Page i want to inluce a <input type=text>, which is required, can only be Capital Letters and the length must min. be 1 and max. 10. I tried it with html5 pattern but it didn't worked. I read something, that if the shopify theme includes ajax, it just ignores the pattern and the required attribute (i don't know if this is true).
So i tried to make my own functions:
$('#dein-text').on("change textInput input", function(evt) {
$(this).val(function (_, val) {
return val.toUpperCase();
});
});
this just should return the string into capital letters.
function checkText() {
var re = /(?=.*[A-Z]).{1,6}/;
if(re.test($('#dein-text').val())) {
$('#problem-bei-input').hide();
$('.add', $product).removeClass('disabled').removeAttr('disabled');
} else {
$('#problem-bei-input').show();
$('.add', $product).addClass('disabled').attr('disabled', 'disabled');
}
}
this function is executed at every change on the input form:
$('#dein-text').on("change textInput input", checkText);
This does not work, because it removes the disabled class if there is min. 1 letter (it does not check if there are more than 6) and if there is one capital letter (something like "HA11" does not add the (.disabled) class).
i hope i could describe what my problem is.
Thank you for your help!
edit: this is the .liquid code of the whole form:
https://codepen.io/shawdyy/pen/PmOPWy
(i hope you can see this on codepen, sry i am really new to the webdev thing)
You can try:
$('#my_id').on("change input", function(evt) {
$(this).val(function (_, val) {
return val.toUpperCase().replace(/[^A-Z]/, "").replace(/^([A-Z]{1,10}).*$/g, "$1");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my_id">
To only allow one to ten uppercase ASCII letters in the input field use the following HTML5 pattern:
<input type="text" pattern="[A-Z]{1,10}" title="Only 1 to 10 uppercase ASCII letters allowed!">
If you need to match a string that only contains 1 to 10 uppercase ASCII letters in plain JS, you need
var re = /^[A-Z]{1,10}$/;
Note that start and end anchors (^ / $) are added by the HTML5 automatIically when using the regex in the pattern attribute.
Related
I have an input field, which I want to limit as follows:
The input will be a comma-separated list
Each string in the list must be limited to 1..3 characters
The list can have as many items as the user wants
some examples:
1,4,6a,16b
1
abc,def,ghi,jkl,mno,pqr,stu,vwx,yzz
I have found the following jsfiddle: https://jsfiddle.net/2x8y1dhL/ which provides a starting point for creating an input mask, but it assumes a fixed number of items in the list, and a fixed length of each input.
What I want is the following logic:
after the user inputs the third character in a row that isn't a comma, a comma is automatically inserted
I have worked on the jsfiddle you have found. Some notes:
You have not specified valid/invalid characters, but the examples given seem to suggest "alpha-numeric plus comma"
Consecutive commas are allowed as it's not specified otherwise.
The meat of the matter are the two functions createMask and destroyMask:
function createMask(string){
return string.replace(/(\w{3})(?!,)(.+)$/g,"$1,$2");
}
function destroyMask(string){
return string.replace(/[^0-9A-Z,]/ig,'');
}
Update 1: Pasting input that is longer than six characters - i.e. needs to be split more than once - turned out to be problematic with the original answer. An explicit loop is needed as the g modifier does not help with that regex. Here's the updated fiddle:
function createMask(string){
let s = string;
let t;
do {
t = s;
s = s.replace(/(\w{3})(?!,)(.+)$/,"$1,$2");
} while (s !== t)
return s;
}
Update 2: However, we can get away without an explicit loop with this alternative regex that only uses a single capture - updated fiddle:
function createMask(string){
return string.replace(/(\w{3})(?!,|$)/g,"$1,");
}
You can repeat optional repetitions of 3 word characters followed by a comma and then match 3 word characters asserting a word char to the right.
^(?:\w{3},)*\w{3}(?=\w)
Regex demo | Forked fiddle
In the replacement use the full match $& followed by a comma.
$("input[name='masknumber']").on("input", function(){
let n = destroyMask(this.value);
this.setAttribute("data-normalized", n);
this.value = createMask(n);
})
function createMask(string){
return string.replace(/^(?:\w{3},)*\w{3}(?=\w)/g,"$&,");
}
function destroyMask(string){
return string.replace(/[^0-9A-Z,]/ig,'');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="masknumber" data-normalized="" size=64>
Or fiddle demo with a variant with 2 capture groups.
Trying to match with regex, it has to be a number and it shouldn't go beyond 10 numbers. Anything else don't show!
match(/[^0-9]|[0-9]{10,80}/)
The first part works, meaning it's NOT a number, but the second part doesn't, if it's above 10.
http://jsfiddle.net/qwtmnuey/1/
I can do it in another way but I want it the regex way.. thank you!
(function($){
$('input').on( 'keypress', function(e){
var char = String.fromCharCode(e.keyCode);
if ( char.match(/[^0-9]|[0-9]{10,80}/) ) {
e.preventDefault();
}
});
})(jQuery)
HTML:
<input type="text">
You're checking if char matches the regex, but you mean to check if the entire contents of the input match your regex. If you add id="myinput" to your <input> and in your javascript you add
var inputdata = document.getElementById("myinput").value;
Then you can check if inputdata matches your regex it does work.
Also you're checking for {10,80} which means between 10 and 80 but you can also change that to {10,} which means 10 or more
Using the pattern attribute in HTML forms is it possible to create a space automatically after 3 characters? How can this be accomplished?
pattern="([A-z0-9À-ž\s]){2,}"
The input is just a text field that receives the same data over and over. 3 numbers, 1 space, and then a name. I would like to be able to enter that but get back an extra space after the numbers.
For example:
If I enter: "951 Houston"I would like it to output: "951 Houston" <---extra space after the 3 numbers.
I would like it to be after any characters entered. So if someone were to enter "Houston" it would actually output "Hou ston" Is this possible using the pattern attribute in forms? If so how? If not what is a possible solution? Thanks
A regex can't add a space, so no, this is not possible with just HTML forms. What you would need to do is first extract the word to replace, then use a regex to split the word into a second word after three characters, then add the result back to the DOM:
var textareas = document.getElementsByTagName("textarea");
var str = document.getElementsByTagName("input")[0].value;
var replaced = str.replace(/.{3}/g, function (value, index) {
return value + (index % 5 == 0 ? ' ' : '');
});
textareas[0].value = replaced;
input, textarea {
width:100%
}
<input value="Houston"/>
<textarea></textarea>
In the above example, the string is extracted from the word in question (Houston in an input field, in this case), and replaced contains the string that has been broken into two new words. Simply insert it wherever you would like :)
Hope this helps! :)
I am attempting to make an angularJS filter which will remove timestamps that look like this: (##:##:##) or ##:##:##.
This is a filter to remove all letters:
.filter('noLetter', function() {
//this filter removes all letters
return function removeLetters(string){
return string.replace(/[^0-9]+/g, " ");
}
})
This is my attempt to make a filter that removes the time stamps, however it is not working, help is much appreciated.
.filter('noStamps', function () {
return function removeStamps(item) {
return item.replace(/^\([0-9][0-9]:[0-9][0-9]:[0-9][0-9]\)$/i, "");
}
})
My goal is for it to delete the timestamps it finds and leave nothing in their place.
edit based on question in comments:
The time stamps are in the text so it would say "this is an example 21:20:19 of what I am 21:20:20 trying to do 21:20:22"
I would want this to be converted into "this is an example of what I am trying to do" by the filter.
You may use
/\s*\(?\b\d{2}:\d{2}:\d{2}\b\)?/g
See regex demo
Thre main points:
The ^(start of string) and $(end of string) anchors should be removed so that the expression becomes unanchored, and can match input text partially.
Global flag to match all occurrences
Limiting quantifier {2} to shorten the regex (and the use of a shorthand class \d helps shorten it, too)
\)? and \(? are used with ?quantifier to match 1 or 0 occurrences of the round brackets.
\s* in the beginning "trims" the result (as the leading whitespace is matched).
JS snippet:
var str = 'this is an example (21:20:19) of what I am 21:20:20 trying to do 21:20:22';
var result = str.replace(/\s*\(?\b\d{2}:\d{2}:\d{2}\b\)?/g, '');
document.getElementById("r").innerHTML = result;
<div id="r"/>
I'm finishing a form I have to do for my homework, and just when I thought I was finished, I found a mistake.
I need a RegEx for input field that would return an alert if there's not exactly 13 digits.
While I know the correct RegExp for this is: /^\d{13}$/, I also need it to ignore an empty field. (Because I don't want the alert to trigger in case the user switches to a different input field)
Just when I thought I had it with: /^$|\d{13}$/, it turns out that it will return an alert if there are less than 13 digits but not if there are more, unlike /^\d{13}$/ that is working fine with 14+ digits.
Can someone help me out with this? Thanks
Here's the rest of the function:
function checkNum(box) {
var re= new RegExp(/^$|\d{13}$/);
if(!box.value.match(re)) {
alert("13 numbers are required");
document.getElementById("numbers").value = '';
}
}
And here is the input field:
<input type="text" name="numbers" id="numbers" placeholder="Numbers" onFocus="this.placeholder=''" onBlur="checkNum(this); this.placeholder='Numbers'"/>
Very close!
/^$|^\d{13}$/
You just forgot to specify that the 13 digits started at the start of the string
Also, just an alternative to match(), for quicker boolean check use test()
if (!/^\d{13}$/.test(box.value)) {
alert("13 numbers are required");
document.getElementById("numbers").value = '';
}