Input pattern specific format HTML/JavaScript - javascript

I have a specific format I need in a text box where the user enters a house address for example"45 Ezra ave" The first 3 characters must be numbers followed by a space. The the rest of the string/input can be as many letters as the user needs.
<input id="street address" type="text placeholder="address" name="address">

How about this: 2 numbers, followed by a space, followed by one or more of any character:
<input pattern="[0-9]{2} .+">

Related

How to force an input html element to show only the last inputted character

I want to create an input:
<input type='text' id='in'></input>
When the user types a character the input will hold that character.
But when the user types a different character, the input will hold the new character. How can I do this?
Follows an example:
<input type='text' id='in' onkeydown="this.value = ''"></input>

HTML5 minimum character length validation ignoring spaces and tabs

I am using HTML5 'pattern' attribute with 'required' for validation of input boxes. HTML5's required attribute works but it can accept spaces and tabs which is not good because user will just put spaces then. I need regex such that it will accepts space and tabs but able to count only character's. Example "ronny jones" this should give 10.
In javascript we do it using something like this, I am looking for similar thing in HTML5
var name = document.forms['contact']['name'].value.replace(/ /g,""); // remove whitespace
if(name.length<6){ // count number of character.
document.getElementById('message').innerHTML="Enter correct Name";
return false;
}
I found one related question to this on SO : Is there a minlength validation attribute in HTML5? but it accepts spaces and tabs, which I don't want.
Below is my code with HTML5 pattern,
<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="[A-Za-z]{6,}" title="Name should have atleast 6 characters." required="" />
I managed a silly hack that does what you asked:
<input type="text" name="name" class="form-control" placeholder="Your Full Name" pattern="\s*(\S\s*){6,}" title="Name should have at least 6 characters." required="" />
There must be 6 non-space characters for this to pass. so "asdfgh", " abc def " will work, but "abc de" fails.
It DOES NOT work for your comment about "there's a space after Anthony" but as Anthony contains 6 characters, then it's fine? If not, can you clarify further in the question.
To explain how it works:
it takes a pattern of "take 1 non-space character" \S followed by "none-or-more space characters" \s*
you need the pattern to be matched 6 or more times (pattern){6,} i.e. (\S\s*){6,}
then allow non-or-more spaces at the front \s*
If you want to limit the characters allowed to Alpha only, change the \S to [A-Za-z].
Yes, it's a hack IMO as it will be hell to parse internally on long strings. But does the job. You might want to mix with maxlength to limit that as well?
<form action="demo.php">
<input id="name" type="text" pattern="^((?:\s*[A-Za-z]\s*){6,})$">
<input type="submit">
</form>
this will work for your case .. its exacly how you want it. i have set limit of character is from 6 to 40..

Australian Mobile number regular expression validation needs to allow space in between number

I need to validate the mobile number
first text input starting with 04
should be total 10 digits including 04(eg : 0412345678)
my input field is below
<form name="uploadForm">
<input type="tel" name="MobileNumber" id="MobileNumber" data-ng-model="ApplicationData.MobileNumber" required maxlength="14" data-ng-pattern="/^(0?4[0-9]{8}/\s)$/">
<span data-ng-show="uploadForm.MobileNumber.$error.pattern">Please enter a valid mobile number.</span>
<input type="tel" name="Number" id="Number" data-ng-model="ApplicationData.Number" required maxlength="14" data-ng-pattern="/(^1300\d{6}$)|(^1800\d{6}$)|(^0[2|3|7|8]{1}[0-9]{8}$)|(^04\d{2,3}\d{6}$)/">
<span data-ng-show="uploadForm.Number.$error.pattern">Please enter a valid mobile number.</span>
</form>
any one can you help me please ?
If I understand this correctly, this is your regex pattern.
^04[0-9]{8}$
^04 - starts with 04
[0-9]{8} - matches the next 8 digits
$ - matches end of string
I think for your first question replace with this regexp. it accepts space in between number.
ng-pattern="/^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$/"
for your second question, its quite long this is what i can come up with at this moment.
ng-pattern="/(^1300\s?([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)|(^1800\s?([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)|(^0[2|3|7|8]{1}[0-9]{8}$)|(^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)/"
any body have interest to modify/short this one.

regex validations for textarea angular

I would like to validate a my textarea field using regex in my angular app. but their will be a certain conditions for textarea.
1. Message should not be more than 500 characters.
2. Text should not consecutive space characters.
3. No word should be more than 20 characters.
4. There should not be consecutive special characters.
<textarea id="message" name="message" type="text" placeholder="" required="" ng-maxlength="500" ng-model="message" ng-pattern="/^[a-zA-Z0-9]{5}$/" class="form-control"></textarea>
any help will be appreciated.
done ng-maxlength="500"
\x20{1}/g - not consecutive space characters
\W{20,}/g - no word at least 20 chars
[^\s]{1}/g - not be consecutive special characters
try this ng-pattern="/(\W{20,}|\x20{1}|[^\s]{1})/g"

white space regex in javascript

I have written a HTML 5 file. In form I have one required text field. I want to validate this text field in such way that user can start the value in it with a space. But he is not allowed to enter only a space character. Means, he can start typing with a space but must not enter only a space character in text field. To work around this, I gave a pattern attribute through javascript's setAttribute method.
<form method="post" action="" id="validation">
Name:<input type="text" id="nome" name="nome" required="required" oninvalid="this.setCustomValidity('Name is required field')" oninput="setCustomValidity('')" /><br />
<br><br>
<input type="submit" value="Enviar" />
</form>
<script>
document.getElementById('nome').setAttribute("pattern",".*\S+.*");
</script>
output: when I gave only space. It works. But when I start typing with a space and then some characters, then It again validates: "Name is required field.", whereas now it should mark it correct.
one more thing, I want to add the pattern attribute through javascript only.
How can I resolve this problem in such a way that when user can start typing with a space but should not be allowed to enter only a space.
The minimal pattern you need is
^ *[^ ]+.*$
If you want to ask for exact non-space characters in the middle (for example, 5 or more) of a string then use
^ *[^ ]{5,}.*$
Notice that the above patterns are indifferent to spaces in the end of matching strings, and if you want to forbid trailing spaces then remove the .* part.
Also if nessesary you may change the space character to \s everywnere in these examples to catch also tabs, carriage return, form feed etc. characters.
It seems you simply want to prevent the user from entering only space characters. You could try simply trimming an instance of the input. It would be more reliable than using a RegEx for this scenario.
If the trimmed instance comes to have null length, then the user entered only space characters. Then you can return an "invalid" error.
Here is an example of the logic:
if(string.trim().length === 0) {
return false;
}
Here is a fiddle: http://jsfiddle.net/esvsLx8u/

Categories

Resources