HTML required character set for form fields - javascript

I have created an online forum with a username and password field. The problem is that I would like to add restrictions on the input to weed out invalid username formats. (Valid username will start with the first 3 characters as XYZ). Is there anyway I can set up a rule that if the first 3 letters of username STARTS with let's say ABC, the Submit button will grey out and display a message that that username is not valid before it checks with the server? But if the user types the required beginning format letters correctly then the Submit button will be enabled?
I tried making the code using the same principals as the # sign being required in an email address but have had strange results.

The simplest way is to use the HTML5 pattern attribute:
<style>
:invalid { border-color: red }
</style>
<form>
<label for=uname>Username:</label>
<input id=uname name=uname type=text pattern="XYZ.*">
<p><input type=submit value=Submit>
</form>
The example uses CSS to indicate an invalid field with red border, for illustration.
The code accepts literally any string that starts with XYZ (case-sensitively), including the string XYZ. Modify as needed.
Since the pattern attribute is not universally supported, you probably want to add JavaScript code that performs a similar check. In it, using a regular expression, as in a pattern attribute, is the simplest approach.

Related

Restricting form input goes haywire

I'm trying to restrict form input in a form that I have. The particular input is for an ID that has very specific requirements. An example of which would be:
YY.MM.DD-000.00
The code I'm working with to restrict it is:
<form>
<input type="text" class="form-control" id="nid"
name="nid" placeholder="#lang('app.nid')"
pattern="[00-99]{2}+\.[00-12]{2}\.[00-31]{2}+\-[000-999]{3}+\.[00-99]{2}"
title="YY.MM.DD-000.00"
value="" />
<button type="submit">
submit
</button>
</form>
And I can't seem to make it accept it. It seems refuses any input I give, both the bad and the supposibly good.
Can anyone help me figure out why?
It's because of those + in your regex. Not sure what you want there, but if you remove those it works. Those plus signs make your regex invalid.
Another problem was the - you escaped. This caused the regex not to work as well:
pattern="[00-99]{2}\.[00-12]{2}\.[00-31]{2}-[000-999]{3}\.[00-99]{2}"
You misunderstand how character groups [...] work in regexes: They define the characters that you can input so you don't need to repeat them and when you use them for months and days, you do need the higher numbers as well as you will not be able to input 09 for example (September or day 9 of the month).
So you need:
[0-9]{2}\.[0-9]{2}\.[0-9]{2}-[0-9]{3}\.[0-9]{2}
Note that I have also removed the + quantifiers and I am not escaping the - as that is only a special character in a character group. However, it works both with and without these.
You can see it here.

HTML 5 check field

I have a this form:
<html>
<form name=“test” action=“test.php”>
<input type=“text” name=“surname” pattern=“.{3,}>”
<input type=“submit” value=“send”>
</form>
I want that the “surname” field has at least 3 characters and for this reason I added the pattern attribute (I use HTML5) but in this way I check this every time the user clicks the "send" button while I want to check this every time the user edits the "surname" field without using javascript but only HTML5.
Is it possible?
you need to add client-side javascript to your form before php processing,
to check the input sequence or pattern of letters and numbers you need to add a regular expression to check the value of the input
It is not possible without using JavaScript. See the HTML5 specification for more details. However you can change the CSS as an indication of an invalid value:
input[pattern]:invalid {
color:red;
}

HTML5: additional chars in input with type="number"

In our app, we have many inputs that are used to fill in school grades. Till now we had
<input type="text" name="mark">
As we're trying to use new features of HTML5, we changed it to
<input type="number" name="mark">
so on mobiles/tablets we have interface with only numbers. And there's the case. It is possible to place in input grades like "5+" and others (for example some two-letter shortcuts "ab" and other). It's customizable by users.
Is there any way to extend input to treat numbers and all that chars as valid WITH extending Android/iOS keyboard layout to only that?
EDIT:
Don't forget that i want to know if i can extend keyboard layout on mobile. If it's not possible, i'll fall back to text with some validation.
I believe you can use the pattern attribute for what you described:
A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.
https://developer.mozilla.org/en/docs/Web/HTML/Element/Input
e.g. <input type="text" name="HasAPattern" pattern="[0-9A-Z]{3}" title="Enter 3 characters">
will result in an input element that allows only 3 characters.
Unfortunately, custom keys are not allowable I believe, so you would have to use a text type that has an added numeric pattern with the attribute above.
Custom keyboards would have to be used for non-standard keyboard layouts/input buttons.
You would probably want just normal text field and use something like JQuery Validate to limit the input and throw warnings if a user enters incorrect data.
Another option would be to trow all possible option into a HTML select tag.
JQuery Validate plugin: http://jqueryvalidation.org/
you can use
<input type="text" name="mark" pattern="[a-z0-9]{2}">
You can specify your regular expression in the pattern and have any character whitelisted
For having 50+ kind of input use the following
<input type="text" name="mark" pattern="[0-9]{2}[+]?">
You could simply use,
<input type="tel" name="mark">
This would do it.

Jquery Validate - Input Mask Conflict

I have a form that uses jquery validate and the form validates on submit and on blur (onfucusout). Some of my fields have masks using the jquery mask plug in. The mask will place something like this in the field (---)---/---- when it comes into focus. When the user clicks out of this field the (---)---/---- disappears. My problem is that although the field is left black it is throwing the validation error thinking that the user has typed in (---)---/---- instead of just leaving it blank.
My first thought was to put a delay on the validate so that it validates after (---)---/---- disappears. My question is how do have set the validate to delay so that it evaluates the field after the characters are gone? If this isn't the right fix can someone help me fix this issue.
Again i think it is caused because the validation is triggering before the mask characters are going away. I need it to validate after the masked place holders disappear. Thanks for any help.
The way I addressed this problem.
Input Mask in my case : "(999) 999-9999"
For my test example i did the following :
(1) The first thing i did was determined what characters were being generated in my DOM.
e.g.
using the below code in FireBug Console.
$('#MyPhoneNumberID').keydown(function(){
console.log($(this).val())
In my case it was spitting out the following (_) -___
(2) The work around I used was to update my regular expression(for phone) and include the mask as part of the regular expression
e.g. "(_) -___" OR correct typed in phone numbers was allowed.
Regular Expression used :
"^(?:+)?(1)?(?:\s*(?:-|.|()?\s*)?(\d{3}|_{3}|\s{3})(?:\s*(?:-|.|))?\s*)?(\d{3}|_{3}|\s{3})(?:\s*(?:-|.)?\s*)?(\d{4}|_{4}|\s{4})$"
Hope this helps!

HTML & Javascript: Using a customized Text Input for Password input

I want to re-invent the password input in HTML.
Okay, here is the work I'd done:
http://www.symplik.com/password.html
(It just a plain html code, nothing really fancy :>)
The "password" is indeed a text input, and I used the onkeyup event to rewrite the input to masking characters.
There're two problems:
(1) backspace or delete cannot be detected
(2) if I type very fast, some characters cannot be captured promptly.
For problem (1). it is partially solved by checking the length of text in the password field and the stored password. Not a very elegant solution anyway.
For problem (2), I'd tried to insert some time delay function in between but still fail. I'd make the field readOnly after every keyUp but it still behaves the same.
Why not use
<input type='password'>
It masks the input for you. No need for javascript.

Categories