Web Tech Week 13
Web Tech Week 13
Fall 2023
Today’s Objective
● Form Elements
● Example
● jQuery
Form Validation
● Form validation is an essential aspect of web development.
● It involves the use of scripting to ensure that user input conforms to
specific requirements.
● This process helps to reduce errors and improve the overall user
experience.
● One of the main benefits of using Javascript form validation is that it
can help to prevent data breaches.
○ By validating user input, developers can ensure that sensitive information such
as passwords and credit card numbers are not accidentally leaked.
Types of Form Validations
● There are two types of form validation techniques that developers
can use.
○ The first is called 'client-side' validation, which involves:
■ checking user input before it is sent to the server.
■ Reduces load on server
■ This type of validation is fast and efficient but can be bypassed by
malicious users.
○ The second type of validation is called 'server-side' validation. This
technique involves:
■ checking user input after it has been sent to the server.
■ While this method is more secure, it can also be slower and less
responsive for the user.
Common Validation Techniques
● Required fields: Ensure essential fields are not left empty.
● Email validation: Validate the format of email addresses.
● Password strength: Check password complexity (e.g., length,
special characters).
● Numeric input: Validate numerical values (e.g., age,
quantity).
● Date validation: Verify the format and validity of dates.
● Regular expressions: Use powerful patterns to validate
complex inputs.
How to Implement?
● Accessing form elements:
○ Use the document.getElementById() method to
retrieve form inputs.
● Event handling:
○ Attach event listeners (e.g., onsubmit, onchange) to trigger
validation.
● Checking input validity:
○ Use JavaScript methods (e.g., value, length, regex) to
validate input fields.
● Displaying error messages:
○ Update the DOM to show error messages dynamically.
Example
Example
Class Activity # 3
● Create a form with four input fields:
○ Name - Alphabetic
○ ID - 4 digit
○ Password - 6 digit alphanumeric
○ Age: 2 digit (range from 15 to 35)
● Check the form has accurate values as mentioned above
● Generate an error message and use CSS to make red color error
● If everything is perfect, use a message with green color!
jQuery
● A light-weight JavaScript library
● Use to execute JS with more ease.
● jQuery can be used to manipulate:
○ HTML/DOM Manipulation
○ CSS Modification
○ HTML events
○ Animations and effects
○ AJAX
● You can use jQuery by:
○ Downloading it from jquery.com
○ Use CDN command
jQuery - How to Write it
Some useful resources
● https://jquery.com/
● https://releases.jquery.com/
● https://www.w3schools.com/jquery/
● https://learn.jquery.com/events/
● https://learn.jquery.com/effects/
● https://www.javatpoint.com/jquery-tutorial
That’s all for today…!