Develop Reference

How to prevent entering space only in a text field on Shopify website

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;
}

How to make input password require at least one special character (bracket included)

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])(?=.*?[~`!##$%^&*()_=+\[\]{};:&apos;.,"\\|\/?><-]).{4,}">
Update: I forgot to html encode the pattern for use directly in html. Now it should work.

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..

Regular expression to not allow spaces anywhere in the email

I am trying to validate the email address using a regular expression such that it throws an error if white spaces are added anywhere in the email. The current regex I am using is this:
<input type="email" class="form-control" name="username" ng- model="username" id="email" placeholder="Email" 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 />
<span ng-show="login.username.$error.pattern">This email format is invalid! </span>
The problem is it allows me to add white spaces in the end. How can I modify it so that if I add a whitespace in the end the error message is fired?

The newest release of angularJs (1.5.7) includes some email address validation improvements.
You can check the commit here.
Line 28 corresponds to the committed regex:
var EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}#)[-!#$%&'*+\/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+\/0-9=?A-Z^_`a-z{|}~]+)*#[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;
Below the directive's code you have the tests to validate the regex. It does check for white spaces.

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/