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..
Related
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} .+">
I was wondering how to add in the special character part with brackets like {} [] () and other stuff like " ' - to the unique character I tried below, but for some reason when I add in another of those characters it stops working.
<-- works but does not have any brackets or quotes for special character-->
<form acton = "#">
<input type="password" id="newPass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!##$%^&*+`~=?\|<>/]).{8,}"
<button>submit</button>
</form>
The part above works but does not have quotes or more special character
Code below has bracket but does not work
<-- does not work (if you do not enter special character user will be able to submit but it does not have any brackets -->
<form acton = "#">
<input type="password" id="newPass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[~`!##$%^&*()-_=+[]{};:'.,"\|/?><]).{8,}"
<button>submit</button>
</form>
also this did not work (from an answer)
<form acton = "#">
<input type="password" id="pass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!##$%\^&*()\-_=+\[\]{};:\'.,\"\\|/?\>\<]).{4,}">
<button>submit</button>
</form>
I am looking for an answer that makes the bottom part (the one with brackets and all of those special character I included) works.
Since it is regex, all of the characters inside [.....] are allowed, so you should add brackets to there. You can do this with the usage of escape character (because brackets has a role in regex). So just add \] and \[ to the characters allowed inside [.....].
try:
<input type="password" name="pw" pattern="(?=.*?[#?!#$%^&*-\]\[])"
By the way.. I would recommend working with regex cheat sheet, it will help you a lot in validation tasks.
As for your EDIT:
The " and ' needed to be escaped. While \" \' won't work you can use \x27 and \x22 instead, these are the hexadecimal representation of " and ' in the ascii table.
try:
<form acton = "#">
<input type="password" id="pass" required pattern = "(?=.*\d)(?=.*
[a-z])(?=.*?[0-9])(?=.*?[~`!##$%\^&*()\-_=+[\]{};:\x27.,\x22\\|/?><]).{4,}">
<button>submit</button>
</form>
You should escape regex (e.g. \]) characters if they need to be matched during pattern search. Also, refer to the existing answer:
Braces and brackets in passwords
The following works for me, hopefully it should work at your end:
(I merely added escaped characters)
<input type="password" id="newPass" required
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*?[0-9])(?=.*?[!##$%^&*+`~'=?\|\]\[\(\)\-<>/]).{8,}">
You're actually very close. The biggest mistakes are:
You should escape some of the special characters inside the character group and you should have hyphen as the last character (otherwise it's a range).
Here is the RegExp you request:
<input type="password" id="pass" required pattern = "(?=.*\d)(?=.*[a-z])(?=.*?[0-9])(?=.*?[~`!##$%^&*()_=+\[\]{};:'.,"\\|\/?><-]).{4,}">
Update: I forgot to html encode the pattern for use directly in html. Now it should work.
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.
I create a form, where one field should only be filled with numbers.
I want that field can be filled only with numbers since entering input.
Like this example :
How Can I Use Javascript to Allow Only Numbers to Be Entered in a TextBox?
I've tried using Regex, but when I try to input is still able to enter letters.
<input type="number" min="2" pattern="^[0-9]" class="andi_input required-entry" name="amount" id="amount" required title='Only Number' />
I want it when input to field and not after click the Submit button and the message appear and inform that the field can only be filled with numbers.
I also try to add validate-number, but the result is the same.
How, without javascript, so that the field can only be filled with numbers or letters?
Whether for this kind of case have to use JavaScript or is there another way without JavaScript?
HTML 5 uses the type="number" so make sure that the browser that you are using is compatible. Check it out in action here.
You should check browser compatibility.
You're right with <input type="number" pattern="^[0-9]" />.
Your regex rule is :
^[0-9] :
^ assert position at start of the string
[0-9] match a single character present in the list below
(0-9 a single character in the range between 0 and 9)
You can check your regex here.
I use to use HTML5 Validation and jQuery one because IE is capricious most of the time.
UPDATE :
Without Javascript it's not possible to check pattern on real time. I suggest you to use a jQuery library like : http://www.jqueryscript.net/form/jQuery-Plugin-For-Formatting-User-Input-with-Specified-Pattern-formatter-js.html.
Here is a OneLiner:
<input type="number" onkeypress="return /[0-9]/i.test(event.key)">
or
<input type="text" onkeypress="return /[a-z]/i.test(event.key)">
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/