Form Validation In JavaScript Tutorial — Build Live with Real-Time Feedback - Part 2 Live Coding
Learn form validation in JavaScript with real-time feedback and on-submit checks. In this live coding tutorial, we build full form validation using native JavaScript—no libraries. We cover regex validation, custom error messages, input event handling, blur event, setCustomValidity, and reportValidity. Build accessible and user-friendly forms that enhance UX and data integrity.
This JavaScript form validation tutorial builds on Part 1 (HTML5/CSS validation) and shows how to:
Write JavaScript form validation logic from scratch
Use regex patterns to validate inputs dynamically
Style feedback with JavaScript + CSS
Show real-time validation using input/blur events
Prevent invalid form submission
Customize default error messages
Use checkValidity, reportValidity, and setCustomValidity APIs
Disable native HTML5 validation and build your own system
Debug JS validation logic in VS Code
👨💻 Ideal for frontend developers, JavaScript learners, and anyone building robust web forms.
📌 Watch Part 1 – HTML5 Form Validation with CSS
👉 • HTML Form Validation Tutorial – Live Codin...
📺 Complete HTML Forms Playlist
👉 • HTML Forms Playlist - Creation, Styling an...
🔧 Tools: Visual Studio Code, Native JavaScript, DevTools
💬 No frameworks. No libraries. Just clean, semantic HTML + JS.
00:00 Introduction
00:16 Limits of HTML5 validation without JavaScript
00:51 What JavaScript brings to the table in HTML5 form validation
01:51 Analyzing a validated form without JavaScript to see the issues
04:15 Adding/Linking a JavaScript file and discussion on defer and src attributes
06:11 How to query elements by tag in JavaScript using DOM
07:15 How to query elements by id attribute in JavaScript
07:55 How to query elements using CSS selectors in JavaScript
09:47 How to add form submit event handler in JavaScript
10:48 Evaluating input text value against a regular expression in JavaScript
13:11 Showing a custom error message using custom styling in JavaScript
15:20 Adding check for built-in HTML5 validation results in submit event handler
16:27 How to prevent a form submission in form submit event handler
17:33 Styling a custom form validation error on form using CSS and JavaScript
20:00 Validating user input after he is finished typing using blur and input events in JavaScript
24:00 How to debug JavaScript code in Visual Studio Code
25:14 Validating user input against regular expression as he types using JavaScript
27:52 Showing custom form validation errors using HTML5 UI via Constraint Validation API
30:00 Showing real time feedback tooltips to user as he types in input field (using HTML5 styling)
31:50 Using setCustomValidity function on input elements correctly
32:31 Using reportValidity to show instant feedback messages correctly
34:00 Mixing HTML5 constraint attributes with custom validation logic
36:10 Why reportValidity suddenly stops working on validation state change on input element
40:00 How to customize HTML5 default error messages using JavaScript
43:51 Controlling all aspects of form validation with JavaScript
45:23 Disabling HTML5 built-in form validation on form submission
47:40 How to validate form on submit event handler using checkValidity if noValidate is applied (HTML5 validation disabled)
49:25 Performing validation checks on individual input elements using checkValidity function
51:50 Using invalid input event to style and show errors on form submit action
55:00 Custom validation and styling using invalid events
57:00 Conclusion
#validation #html5validation #javascriptformvalidation #javascript #htmlform #html5validation