Today’s Lecture • Form Validation using JavaScript • Client-Side Validation Approaches – HTML Built-in Form Validation – JavaScript Based Validation • Regular Expressions Form Validation • It’s the process to analyze the validity of data client had entered in different form elements. • It performs two functions: – Basic Data Validation: form must be checked to make sure all required fields are filled in. – Data Format Validation: data that is entered must be checked for correct form and value. • Validation can happen in two places: – In the browser using JavaScript (Client-Side). – On the server using one of several languages such as PHP (Server- Side). • Client-Side validation is preferred due to following reasons: – It‘s quicker for user; because form doesn’t need to be sent to the server, processed, and returned to the user with any relevant error messages. – It saves load on the server; because some errors will get caught before the form is submitted. Different Types of Client-Side Validation • Client-Side validation can be categorized into two types: – Built-in Form Validation • It uses HTML5 form validation features. • Example: required attribute. – JavaScript validation is coded using JavaScript. • This validation is completely customizable. • Example: write own JavaScript validation file (JSValidate.js) Built-in Form Validation • required Attribute – Simplest HTML5 validation feature is the required attribute. – required attribute specifies that an input field must be filled out before submitting form. – required attribute works with input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. – It also works on <select> and <textarea> elements. Built-in Form Validation • min and max Attributes – input min and max attributes specifies minimum and maximum range of an input field. – If field contains a value outside this range, it will automatically generate an error. – min and max attributes work with input types: number, range, date, datetime-local, month, time and week. Built-in Form Validation • pattern Attribute – input pattern attribute specifies a regular expression that input field's value is checked against, when the form is submitted. – pattern attribute works with input types: text, date, search, url, password , tel, and email. Built-in Form Validation • type Attribute – type="email" used for input field that contain an email address. – type="url" used for input field that contain URL. Validating Forms using JavaScript • We use JavaScript if we want to take control over the look and feel of native error messages or to deal with legacy browsers that don’t support HTML's built-in form validation. • When user presses submit button on a form, it triggers onsubmit event handler on the <form> element. – This calls a validation function stored either in a separate script or in the head of the document. – Function must then return true for the form to be sent. – Or if an error is encountered, the function returns false and the user’s form will not be sent, and form should indicate to the user where there is a problem with the information the user entered. Basic Data Validation HTML Form
Error Message Display
Regular Expressions • It’s a sequence of characters that forms a search pattern. – When we search for data in a text, we can use this search pattern to describe what we are searching for. • It can be a single character, or a more complicated pattern. • It can be used to perform all types of text search and text replace operations. • Using String Methods – In JavaScript, regular expressions are often used with the two string methods: search() and replace(). – search() method uses an expression to search for a match and returns the position of the match. – replace() method returns a modified string where the pattern is replaced. Regular Expressions • Regular Expressions Modifiers Modifier Description i Perform case-insensitive matching Perform a global match (find all matches rather than stopping g after the first match) m Perform multiline matching
• Regular Expressions Patterns
– Brackets are used to find a range of characters. Modifier Description [abc] Find any of the characters between the brackets [0-9] Find any of the digits between the brackets (x|y) Find any of the alternatives separated with | Regular Expressions • Regular Expressions Patterns – Metacharacters are characters with a special meaning. Metacharacter Description \d Find a digit \s Find a whitespace character Find a match at the beginning of a word like this: \ \b bWORD, or at the end of a word like this: WORD\b Find the Unicode character specified by the hexadecimal \uxxxx number xxxx
– Quantifiers define quantities.
Quantifier Description n+ Matches any string that contains at least one n n* Matches any string that contains zero or more occurrences of n n? Matches any string that contains zero or one occurrences of n Regular Expressions • Using the RegExp Object o In JavaScript, RegExp object is a regular expression object with predefined properties and methods. Summary of Today’s Lecture • Form Validation using JavaScript • Client-Side Validation Approaches – HTML Built-in Form Validation – JavaScript Based Validation • Regular Expressions Resources • Chapter 12 from Beginning HTML, XHTML, CSS and JavaScript By John Duckett(4th Edition) • https://www.tutorialrepublic.com/javascript-tutorial/javascript-form- validation.php • https://www.w3schools.com/js/js_validation.asp • https://www.w3schools.com/js/js_regexp.asp