form validation n.
Skip this Video
Loading SlideShow in 5 Seconds..
Form Validation PowerPoint Presentation
Download Presentation
Form Validation

Loading in 2 Seconds...

play fullscreen
1 / 19

Form Validation - PowerPoint PPT Presentation

  • Uploaded on

Form Validation. Forms. Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers Form controls are grouped inside the <form> element Some common controls: buttons, text boxes, checkboxes, etc. Form Attributes. There are two form attributes. action.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Form Validation' - honey

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
  • Forms are a graphical user interfaces (GUIs) that enables the interaction between users and servers
  • Form controls are grouped inside the <form> element
  • Some common controls: buttons, text boxes, checkboxes, etc.

Form Attributes

  • There are two form attributes


This attributes specifies the URL that is intended to receive the data from form elements

<form action=“CollectData.php” … >


This attributes specifies the type of HTTP method by which data is sent to the server

method attribute
Method Attribute
  • There are two common form methods


Data sent by the form is appended to the URL specified in the Action attribute


Data sent by the form is not appended to the URL specified in the Action attribute

method attribute1
Method Attribute


Form data


Data is transmitted part of the HTTP Request instead of the URL

client side form validation
Client-side Form Validation
  • Using server-side validation may increase the overhead for clients
    • requires active connections to/from the client
      • User submits the form
      • Server validates the data
      • On errors, send message
      • User checks form data and resubmits
      • etc…
  • Client-side validation is performed within the browsers using built-in JavaScript
regular expressions and regexp object
Regular Expressions and RegExp Object
  • A regular expression is an object that describes a pattern of characters.
  • The JavaScript RegExp class represents regular expressions
  • var pattern = new RegExp(pattern, attributes);
  • var pattern = /pattern/attributes;
what is a regular expression
What is a regular expression?


regular expression ("regex"): describes a pattern of text

can test whether a string matches the expr's pattern

can use a regex to search/replace characters in a string

very powerful, but tough to read

regular expressions occur in many places:

text editors (TextPad) allow regexes in search/replace

languages: JavaScript; Java Scanner, Stringsplit

Unix/Linux/Mac shell commands (grep, sed, find, etc.)

using test
Using test()
  • The test() method is a RegExp expression method.
  • It searches a string for a pattern, and returns true or false, depending on the result.
  • /amrita/.test(str)
basic regexes
Basic regexes


a regular expression literal in JS is written /pattern/

the simplest regexes simply match a given substring

the above regex matches any line containing "abc"

YES : "abc", "abcdef", "defabc", ""

NO : "fedcba", "ab c", "AbC", "Bash", ...

wildcards and anchors
Wildcards and anchors

. (a dot) matches any character except \n

/.oo.y/ matches "Doocy", "goofy", "LooPy", ...

use \. to literally match a dot . character

^ matches the beginning of a line;

$ the end

/^if$/ matches lines that consist entirely of if

special characters
Special characters

|means OR

/abc|def|g/ matches lines with "abc", "def", or "g"

precedence: ^Subject|Date: vs. ^(Subject|Date):

There's no AND & symbol. Why not?

() are for grouping

/(Homer|Marge) Simpson/ matches lines containing "Homer Simpson" or "Marge Simpson"

\ starts an escape sequence

many characters must be escaped: / \ $ . [ ] ( ) ^ * + ?

"\.\\n" matches lines containing ".\n"

Quantifiers: * + ?

* means 0 or more occurrences

/abc*/ matches "ab", "abc", "abcc", "abccc", ...

/a(bc)*/"matches "a", "abc", "abcbc", "abcbcbc", ...

/a.*a/ matches "aa", "aba", "a8qa", "a!?_a", ...

+ means 1 or more occurrences

/a(bc)+/ matches "abc", "abcbc", "abcbcbc", ...

/Goo+gle/ matches "Google", "Gooogle", "Goooogle", ...

? means 0 or 1 occurrences

/Martina?/ matches lines with "Martin" or "Martina"

/Dan(iel)?/ matches lines with "Dan" or "Daniel"

more quantifiers
More quantifiers

{min,max} means between min and max occurrences

/a(bc){2,4}/ matches lines that contain"abcbc", "abcbcbc", or "abcbcbcbc"

min or max may be omitted to specify any number

{2,} 2 or more

{,6} up to 6

{3} exactly 3

character sets
Character sets

[ ] group characters into a character set; will match any single character from the set

/[bcd]art/ matches lines with "bart", "cart", and "dart"

equivalent to /(b|c|d)art/ but shorter

inside [], most modifier keys act as normal characters

/what[.!*?]*/ matches "what", "what.", "what!", "what?**!", ...

Exercise : Match letter grades e.g. A+, B-, D.

character ranges
Character ranges

inside a character set, specify a range of chars with -

/[a-z]/ matches any lowercase letter

/[a-zA-Z0-9]/ matches any letter or digit

an initial ^ inside a character set negates it

/[^abcd]/ matches any character but a, b, c, or d

inside a character set, - must be escaped to be matched

/[\-+]?[0-9]+/ matches optional - or +, followed by at least one digit

Exercise : Match phone numbers, e.g. 206-685-2181 .

built in character ranges
Built-in character ranges
  • \b word boundary (e.g. spaces between words)
  • \B non-word boundary
  • \d any digit; equivalent to [0-9]
  • \D any non-digit; equivalent to [^0-9]
  • \s any whitespace character; [ \f\n\r\t\v...]
  • \s any non-whitespace character
  • \w any word character; [A-Za-z0-9_]
  • \W any non-word character
  • \xhh, \uhhhh the given hex/Unicode character
    • /\w+\s+\w+/ matches two space-separated words
html5 validation
HTML5 Validation
  • New attributes for <input>
    • required =‘required’
    • pattern= ‘a regular expression’ can be used with <input> types, text, search,url, telephone, email, and password.
    • min= max = can be used with <input type=range>