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/
Related
I have input text boxes on my website to allow products to be personalised.
The fields must contain some text but some customers workaround this by just entering a space and submitting the form. This is a problem as the personalisation can't be left blank and has to be some text value, even if it's just a dot or a hyphen, for example.
How do I prevent the form being submitted where the text box only has a single space as the only character that has been entered?
The code is Liquid as it's a Shopify e-commerce store
<div class="personalisation_label">
<p>Type the personalisation you want below:</p>
</div>
<div class="personalisation">
<input type="text" name="properties[Line 1]" id="Line 1-0-0" maxlength="12" size="12">
<button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
</div>
Have you considered using plain HTML5 form validation?
If you want to disallow value consisting entirely from whitespace characters:
<input type="text" name="properties[Line 1]" id="Line 1-0-0" maxlength="12" size="12"
pattern="\s*[^\s]+\s*" />
In this example:
\s means whitespace character class
\s* matches any number of whitespace characters (including no characters at all)
[^\s]+ matches at sequence of at least one non-whitespace character
and the final \s* matches any whitespace in the end of the input
Combined they allow user to enter anything except empty string and a string consisting entirely from whitespace.
Alternatively, if you want users to use only Latin letters:
<input type="text" name="properties[Line 1]" id="Line 1-0-0" maxlength="12" size="12"
pattern="[a-zA-Z]+" />
see documentation here:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#Validating_against_a_regular_expression
P.S. please do think about the business problem that you are trying to solve. Your end goal is probably not to get the perfectly formatted input in your CRM but paying customers.
If I were in your shoes I'd try to understand why your customers do not want to specify personalisation and put spaces instead.
Maybe they don't need it? Maybe they do not care? Maybe they don't want to think or not sure what to specify when making an order? Maybe they need time to think? Maybe they are not willing to commit to specific phrasing just yet?
As a shop owner, I'd let customer put whatever they want in any field as long as they are making an order and paying for it. Adding extra hurdles on the checkout path will hurt the conversion funnel.
If you really want your customers to use personalisation, follow up with them via email or phone after they make an order and ask them what they want to put in there and tell them that this is optional and they have time to think.
HTML:
<button type="submit" name="add" id="AddToCart" onclick="return validate();" ... rest of the HTML
JavaScript:
function validate() {
var text = document.getElementById("Line 1-0-0").value;
if (!text.replace(/\s/g, '').length) {
return false;
}
return true;
}
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 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..
I have the following email validation code that uses the ng-pattern directive. I need to include single quotes in the error validation so that for example: asd'f#dfs.com fails. I don't want to use the default angular directive because subsequent .. (dots), ^, commas etc not catered for
<input type="email" name="username" placeholder="jasdf#asdf.com" ng-model="user.username" ng-maxlength="100" ng-model-options="{ updateOn: blur }" ng-pattern='/^(([^<>()\[\]\\.\,;:\s#"]+(\.[^<>()\[\]\\.,;^:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/' required />
<div class="error-container" ng-show="userForm.username.$dirty && userForm.username.$error">
<small class="error" ng-show="userForm.username.$error.required">
Your email is required.
</small>
<small class="error" ng-show="userForm.username.$error.pattern">
Please input a valid email.
</small>
<small class="error" ng-show="userForm.username.$error.maxlength">
Your email cannot be longer than 100 characters
</small>
It can be seen from the above that I'm using the following Regex: ng-pattern='/^(([^<>()\[\]\\.\,;:\s#"]+(\.[^<>()\[\]\\.,;^:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'
My question is how do I include single quotes (') so that it doesn't clash with the ng-pattern tag quotes and also (^) in the Regex. I searched around and it seems I should use &apos but not sure how to implement. Appreciate any help.
You can use this a bit shortened version:
ng-pattern="/^(([^<>()\[\]\\.,;:\s#^\x22\x27]+(\.[^<>()\[\]\\.,;^:\s#\x22\x27]+)*)|(\x22[^#]+\x22))#((\[[0-9]{1,3}(\.[0-9]{1,3}){3}])|(([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}))$/"
Here is the regex demo
The changes are:
Three \.[0-9]{1,3} are contracted since it is repeated 3 times to (\.[0-9]{1,3}){3}
The first and second negated character classes now contain \x27 (') and \x22 (") symbols
Also added ^ to the first negated character class
\x22.+\x22 is turned to \x22[^#]+\x22 so that we do not overflow to the domain part and stay within the username part.
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)">