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 Cancel reply