Form Validation

Concepts Used: Events, Regex, DOM manipulation

Features:

  • Checks empty input
  • Validates email format
  • Shows error messages
<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h2>Register Form</h2>
  <form id="myForm">
&lt;input type="text" id="name" placeholder="Enter Name"&gt;&lt;br&gt;&lt;br&gt;
&lt;input type="email" id="email" placeholder="Enter Email"&gt;&lt;br&gt;&lt;br&gt;
&lt;button type="submit"&gt;Submit&lt;/button&gt;
</form> <p id="msg"></p> <script>
$(document).ready(function(){
  $("#myForm").submit(function(e){
    e.preventDefault();
    let name = $("#name").val().trim();
    let email = $("#email").val().trim();
    let emailPattern = /^&#91;^ ]+@&#91;^ ]+\.&#91;a-z]{2,3}$/;
    if(name === ""){
      $("#msg").text("Name is required").css("color","red");
    } 
    else if(!email.match(emailPattern)){
      $("#msg").text("Invalid Email").css("color","red");
    } 
    else {
      $("#msg").text("Form Submitted Successfully!").css("color","green");
    }
  });
});
</script> </body> </html>

Explanation:

  • .submit() handles form submission.
  • Regex checks email format.
  • .text() and .css() display validation messages dynamically.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *