Develop Reference

Ways to prevent survey respondents from inputting spaces as their first character

I am basically new to html/css/javascript and I just got thrown a problematic issue.
I have a text box for my "Others, please specify" option. However, there are instances where some respondents can proceed to the next question by just entering a space and nothing else. When I download my data, the field became blank and hence more cleaning work is needed.
Just wondering if there any ways (html, css or javascript) that I can make use of to prevent my respondents from entering just spaces for the very first character. Any help would be appreciated. Thank you.

Put the required input in a form with a pattern which requires non-space characters:
<form>
<input required pattern="\S.*">
<button>submit</button>
</form>
\S.* means - match one non-space character (at the beginning of the string), followed by anything.

Consider using RegEx and use your desired pattern. In your case /[^\s]/ (matches anything that is not a whitespace character) will do.

Variable length for input field

Im using an angular 1 app.
I have this field:
<input type="string" maxlength="4" ng-model="account.myNumber" />
This field should only accept integers. I think that if I use "type=number" some browser will display the field in a strange way with some kind of selectbox to change the numbers in the field. So I think it's best to have a regex to only allow numbers.
However, this field has a maxlength of 4 characters ONLY IF the first character is not equal to 0.
If the first entered character is 0, then the maxlength should be 5.
What I wonder if there is some regex to solve this. Or should I let the controller check this? I think it would be neater with a regex if it is possible to let it calculate that.

You can use the HTML5 pattern attribute to accomplish this:
<input type="string" pattern="^0?[0-9]{0,4}$" ng-model="account.myNumber" />

Mobile Safari - Invoke Secondary Keyboard on input type="text"

<input type="text"> brings up this keyboard:
while <input type="number"> brings up this one:
Is there a way to keep the input type text and invoke the second keyboard? perhaps with a pattern attribute?
My issue with input type="number" is that the user is expected to input fractions and $("#input_id").val(); is having trouble with space and forward slash, e.g 3 5/6 returns 3 and 7/13 returns 7.
if this can be bypassed i can also work with that.

<input type="text"> will always invoke primary keyboard.
What you can do is:
Prevent user from typing any character other than 0-9 and .(dot) by
checking keycode or by regular expression
eg: [0-9][.][0-9]{1-2} returns true for one or two decimal places.
Add some validation rule to the input field and show error when user submits the form

Parse amount in input in Javascript

I have an input in my form where the user have to write an amount to pay. The problem is that the user have different ways to do it, it could be 1,350.55 (this is he correct one), but it could be something like this 1.350,55 or 1.350. So, is there any way to parse the amount to my correct form?
Thanks!

You want to parse the input, right?
Why not try to make the input a currency field?
And then parse it into a container through angular, so that customers may see the value and then work with the angular filtered value.
Here is a fiddle:
http://jsfiddle.net/lacrioque/vouLmrac/
<p><label for='numberinput'>Your Price here: </label><input type='number' name='numberinput' ng-model='numbertofilter' placeholder="1,350.99"/></p>
<p>Price: <span>{{numbertofilter | currency }}</span></p>

If you don't know the format, how would you parse 13.995? Would it be "13955" (an integer) or the float one?
You may instead want to mask the format and avoid thousand separators entirely. And tell the user not to use them.

Use ng-pattern
Attach ng-pattern to your input and feed it a RegEx of your required pattern. This way people will only be able to input in the correct way and you can avoid bad data.
Please check out this link for more information on input formatting.
Example
Here I have an example for any whole number up to 9999999 its very simple if you understand RegEx
<input type="number" ng-model="price" name="price_field"
ng-pattern="/^[0-9]{1,7}$/" required>
Note
You can check your RegEx here.

Regular expression ng-pattern angularjs

I have to validate an input field, but I have problems when the user copy and paste something inside the input
This is my code
<input type="text" ng-change="calculate()" ng-pattern="coordsPattern" ng-model="from" class="input-coords" placeholder="(x|y)">
where the coordsPattern is:
$scope.coordsPattern = /^\(?\-?\d{1,3}\|\-?\d{1,3}\)?$/;
the input can take
(158|158)
-158|158
(-158|158
.....etc
but when the user copy and paste the same thing from a different page, depending on browser to browser, the input looks like (158|158) but the pattern is invalid because when copying there are hidden tabs or spaces between chars. for example
((tab)(tab)158(tab)|(tab)(tab)-158(tab)
but in the input text looks like (158|-158 so for the user is a valid input
the input is valid (because in the calculate() function I clean the input from spaces and tabs) but invalid with that pattern and angular doesn't execute the calculate() function.
this one is a copy&paste text which includes hidden tabs
(‭-‭91‬‬|‭-‭18‬‬)
Thank you
EDIT
this is the var_dump of the string
string '(‭-‭91‬‬|‭-‭18‬‬)' (length=33)
it contains special chars! neither tabs or spaces!
maybe I have to find a different solution to validate the input...

$scope.coordsPattern = /^\s*?\(?\s*?\-?\s*?\d{1,3}\s*?\|\s*?\-?\s*?\d{1,3}\s*?\)?\s*?$/;
This should match the expected input even when there are whitespace characters inserted.