How to add form validation for empty input fields with JavaScript.
Step 1 : Create a Simple input field in HTML
<h2>Input field validation via JavaScript</h2> <p>Press Submit button without entering any text.</p> <form name="myForm" action= "/action_page.php" onsubmit="return validateForm()" method="post" required> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>
Step 2: Add JavaScript
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "" || x == null) {
alert("Name must be filled out");
return false;
}
}
Output and Full Code
How to add form validation for empty input fields with JavaScript.
You may Also Like
How to Create an Avatar image with CSS
By Richard
/ January 20, 2022
How to Create an Avatar image with CSS Step 1) Add HTML: <h2>How to create Avatar Images with CSS</h2> <img...
Read More
How to Change Background Images on Scroll with CSS.
By Richard
/ January 13, 2022
How to Change Background Images on Scroll with CSS. Step 1) Add HTML: <div class="bg-image img1"></div> <div class="bg-image img2"></div>...
Read More
How to hide a Navigation Menu on Scroll down with CSS and JavaScript
By Richard
/ January 3, 2022
How to hide a Navigation Menu on Scroll down with CSS and JavaScript Step 1) Add HTML: Create a navigation...
Read More
How to Create an Image Comparison Slider / Image Curtain Slider Using HTML, CSS and JS
By Richard
/ December 16, 2021
How to Create an Image Comparison Slider / Image Curtain Slider Using HTML, CSS and JS Step 1) Add HTML:...
Read More
How to add form validation for empty input fields with JavaScript.
By Richard
/ December 4, 2021
How to add form validation for empty input fields with JavaScript. Step 1 : Create a Simple input field in...
Read More
How to create a Sliding Full screen Curtain navigation menu with CSS and JavaScript
By Richard
/ November 29, 2021
How to create a Sliding Full screen Curtain navigation menu with CSS and JavaScript Step 1 : Adding HTML, Creating...
Read More
How to Create a Responsive Cutout/Knockout text with CSS
By Richard
/ November 23, 2021
A cutout text (or knockout text) is a see-through text that appears cut out on top of a background image...
Read More
How to Create Show Password Feature / Toggle Password Visibility using JavaScript
By Richard
/ November 15, 2021
How to Create Show Password Feature / Toggle Password Visibility using JavaScript Step 1) Add HTML: <p>Click the radio button...
Read More
How to Create an Image Overlay Icon Effect on Hover
By Richard
/ November 12, 2021
How to Create an Image Overlay Icon Effect on Hover Step 1) Add HTML: <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...
Read More