Practical JAVASCRIPT – input validation in My bookstore

1. Practical JAVASCRIPT – input validation in My bookstore Using sample code – Max Ng

2. Two approaches are going to be demonstrated in this lesson • Field validation • Form validation

3. Javascript is interpreted when on event for field validation Index.php 1. onblur=“fname_validation(1,15) 2. index-validation.js Function fname_validation(mx,my) ….. A link is built from index.php Function call will trace the index-validation.js for the “fname_validation”

4. The outcome is:

5. Field validation may not be desirable • Filling sequence is fixed. • It may be very restrictive and annoying. • 3. The validation can be stopped by web browser.

6. Form validation can be done thru html form onsubmit event. order_summary.php <script src=“ordersummary-validation.js” … 1. onSubmit=“return formValidation();” 4. 6. Action=“ordersubmitted.php” 2. ordersummary-validation.js Function formValidation() document.orderform.submit(); 5. 3.

7. Let’s take a validation function to examine in details in ordersummary-validation.js Regular expression

8. Let’s read some regular expression sample here. • /^[0-9]+$/ matches string of “0” to “9” with 1 or more digits. • /^[0-9] {5,8}$/ matches string of “0” to “9”with 5 to 8 digits. How to read? How about this? /^[0-9a-zA-Z]+$/ /^[a-zA-Z]+$/

9. Let’s read the regexp for email checking this way!! • /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ /^ \w+ ([\.-]?\w+)* @ (\.\w{2,3})+ $/ ([\.-]?\w+)* \w+ ( [\.-]? \w+ )* ( \. \w{2,3} )+ a @ a .aa What is the shortest email mail address allowed?

10. What have we learnt in this lession? • Field validation • onblur event of each input • use of <script src=…> to link a js file • Form validation • onSubmit event of a form • use of regular expression in javascript function • use of “document.<form>.submit()” to submit to another url as specified in <form … action=“…”>

11. Thanks!!