Scribd
Upload
21 views13 pages

Web Tech Week 13

Uploaded by

f2021105161
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
21 views13 pages

Web Tech Week 13

Uploaded by

f2021105161
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/ 13

Web Technologies

Week # 13: Form Validation with JavaScript

Fall 2023
Today’s Objective

● Basics of Form Validation

● Front-End vs Back-End Validation

● 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…!

You might also like