Form Validation using Java Script

<html> <head> <script type="text/javascript"> function validate() { var fname = document.getElementById("fname").value.trim(); var age = document.getElementById("age").value.trim(); var email = document.getElementById("email").value.trim(); // Validate Name (Max 10 characters) if (fname.length === 0) { alert("The name cannot be empty"); return false; } if (fname.length > 10) { alert("The name must be less than 10 characters"); return false; } // Validate Age (Number between 1 and 100) if (isNaN(age) || age < 1 || age > 100) { alert("The age must be a number between 1 and 100"); return false; } // Validate Email var atPos = email.indexOf("@"); var dotPos = email.lastIndexOf("."); if (atPos == -1 || dotPos == -1 || dotPos < atPos) { alert("Not a valid e-mail!"); return false; } return true; // If all checks pass, allow form submission } </script> </head> <body> <form action="" onSubmit="return validate()"> Name (max 10 characters): <input type="text" id="fname" size="20"><br /> Age (from 1 to 100): <input type="text" id="age" size="20"><br /> E-mail: <input type="text" id="email" size="20"><br /> <br /> <input type="submit" value="Submit"> </form> </body> </html> Explain : The form contains three input fields: Name (<input type="text" id="fname">) – Accepts the user’s name. Age (<input type="text" id="age">) – Accepts the user’s age. Email (<input type="text" id="email">) – Accepts the user’s email address. The form's onSubmit event is tied to the validate() function, which checks if the form fields are valid before submission. If validation fails, the form will not be submitted. 1. Name Validation: // Validate Name (Max 10 characters) if (fname.length === 0) { alert("The name cannot be empty"); return false; } if (fname.length > 10) { alert("The name must be less than 10 characters"); return false; } Check if Name is Empty: If the user doesn't provide a name (i.e., the length is 0), an alert will be shown with the message "The name cannot be empty", and the form submission is prevented by returning false. Check Name Length: The name is checked to ensure it is no longer than 10 characters. If it's too long, an alert is displayed, and the form is not submitted. 2. Age Validation: // Validate Age (Number between 1 and 100) if (isNaN(age) || age < 1 || age > 100) { alert("The age must be a number between 1 and 100"); return false; } Check if Age is a Number: isNaN(age) checks whether the input is a valid number. If the input is not a number, an alert appears. Age Range Check: The age is validated to be between 1 and 100. If the age is not within this range, an alert will be shown with the message "The age must be a number between 1 and 100", and the form will not be submitted. 3. Email Validation: // Validate Email var atPos = email.indexOf("@"); var dotPos = email.lastIndexOf("."); if (atPos == -1 || dotPos == -1 || dotPos < atPos) { alert("Not a valid e-mail!"); return false; } Check for "@" Symbol: indexOf("@") checks if the email contains the "@" symbol. If not, it returns -1, and an alert is shown. Check for "." Symbol: lastIndexOf(".") checks if there is a period . in the email address, which is required after the "@" symbol for a basic email format. Basic Email Format: The email must contain both an "@" symbol and a period after the "@" symbol. If either condition fails, an alert will appear with the message "Not a valid e-mail!", and the form submission is halted.