Scribd
Upload
16 views31 pages

Week 13 Complete

The document discusses client-side validation using HTML5 features such as the pattern attribute for regular expressions and the required and placeholder attributes for input fields. It highlights the importance of using labels to enhance usability and mentions the functionality of telecolon URLs for mobile dialing. Additionally, it provides examples of how to implement these features effectively.

Uploaded by

noumanikram989
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views31 pages

Week 13 Complete

The document discusses client-side validation using HTML5 features such as the pattern attribute for regular expressions and the required and placeholder attributes for input fields. It highlights the importance of using labels to enhance usability and mentions the functionality of telecolon URLs for mobile dialing. Additionally, it provides examples of how to implement these features effectively.

Uploaded by

noumanikram989
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

Regular Expression

Validation
For some types like e-mail, there's some basic
validation. But this is not very smart validation.

If you want to do better client side validation


though,HTML-5 supports that too.

There's also a pattern attribute on the input element,


that you can use to validate on the client side.
The pattern element takes a regular expression, as
expressed by the java script regex syntax.
Example
For example, let's1presume we want to only allow
Country code in a specific field in our mobile web
application like PAK
I can put in a regular expression for this, and now when I
try to input a Country code of more then three letters
and then submit, it pops up an error message that says I
have to match the requested format.
Example 2
An <input> element with type="password" that must
contain 6 or more characters:
To Learn more about Regular
Expressions

• http://www.w3schools.com/jsref/jsref_obj_regexp.asp
Two Important
Features of Input
Two Important Features of Input
• There are two more features I wanted to mention on
inputs.

• The required attribute and the place holder attribute.

• Required just lets me say, this field is required before


you can submit the form. So,
Example
For example, if I want to make sure that a user enters
the username,
Now if user will try to submit this form with out entering
the username he will get the error message
Placeholder Text
The other feature, is the placeholder text. You may want
to give hints to your users. In some fields, they go away
when they start typing. You can do that pretty easily by
just setting a placeholder attribute.
• The placeholder attribute specifies a short hint that
describes the expected value of an input field (e.g. a
sample value or a short description of the expected
format).
• The short hint is displayed in the input field before the
user enters a value.
• Note: The placeholder attribute works with the
following input types: text, search, url, tel, email, and
password.
Example
Input in older browsers
• The HTML spec says that unrecognized input types are
to be

• treated as text. So, new input types will still work even if
they are not supported on a particular browser.

• They'll just function like text inputs. Not quite as useful,


but still functional.
Wrapping in Label
You should always wrap label elements around your
input elements, and their associated labeling texts,
because it increases the touchable area of the control.
• The only difference between these two controls is that
one of them has a label element around it.

• But you'll notice, it's much easier to touch the one with
the label. The one without a label, you have to actually
touch the check box itself, in order to activate the
control.
telecolon URL
On mobile, you can use a telecolon URL to
create a URL that when activated will
actually dial a telephone number. This is a
really handy feature, particularly for
business websites. Customers can instantly
dial you.
• Of course, on desktop, these URLs will typically fail, so
you probably want to deactivate them.

You might also like