Scribd
Upload
8 views7 pages

JavaScript Form Validation Guide

The document outlines a simple JavaScript form validation process. It details steps to detect form submission, prevent default behavior, store the form, check its validity, and display error messages for invalid inputs. The validation process enhances user experience by preventing auto-submission and highlighting errors using Bootstrap styles.

Uploaded by

nurulshakierah
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
8 views7 pages

JavaScript Form Validation Guide

The document outlines a simple JavaScript form validation process. It details steps to detect form submission, prevent default behavior, store the form, check its validity, and display error messages for invalid inputs. The validation process enhances user experience by preventing auto-submission and highlighting errors using Bootstrap styles.

Uploaded by

nurulshakierah
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

JavaScript Form Validation

(Simple Explanation)
Topic 3.3 | Web Design Technology
Step 1: Detect the Form
Submission
• [Link]('registrationForm').
addEventListener('submit', function (event) {

• 👉 Finds the form with ID 'registrationForm'


and waits for it to be submitted.
Step 2: Prevent Default Behavior
• [Link]();
• [Link]();

• 👉 Stops the form from reloading the page. We


will check validation first.
Step 3: Store the Form in a Variable
• const form = [Link];

• 👉 Saves the form that was submitted into a


variable called 'form'.
Step 4: Check if the Form is Valid
• if ([Link]()) {
• alert('Form submitted successfully!');
• }

• 👉 Checks if all inputs meet their rules (like


required, email format).
• 👉 If valid, shows a success message.
Step 5: Show Error Messages if
Invalid
• else {
• [Link]('was-validated');
• }

• 👉 Adds the Bootstrap class 'was-validated' to


highlight invalid fields.
• 👉 Shows red borders and error text under each
field.
✅ Summary
• ✔ Prevents form from auto-submitting.
• ✔ Checks whether inputs are valid.
• ✔ Shows a success message if valid.
• ✔ Highlights invalid fields using Bootstrap if
errors exist.

You might also like