Skip to main content

Jquery Form Validation Example

<html>

<head>
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function() {

  $('#first_form').submit(function(e) {
    e.preventDefault();
    var first_name = $('#first_name').val();
    var last_name = $('#last_name').val();
    var email = $('#email').val();
    var password = $('#password').val();

    $(".error").remove();

    if (first_name.length < 1) {
      $('#first_name').after('<span class="error">This field is required</span>');
    }
    if (last_name.length < 1) {
      $('#last_name').after('<span class="error">This field is required</span>');
    }
    if (email.length < 1) {
      $('#email').after('<span class="error">This field is required</span>');
    } else {
      var regEx = /^[A-Z0-9][A-Z0-9._%+-]{0,63}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/;
      var validEmail = regEx.test(email);
      if (!validEmail) {
        $('#email').after('<span class="error">Enter a valid email</span>');
      }
    }
    if (password.length < 8) {
      $('#password').after('<span class="error">Password must be at least 8 characters long</span>');
    }
  });

});
</script>
</head>
<body>
<h2>Example 1:</h2>
<form id="first_form" method="post" action="">
  <div>
    <label for="first_name">First Name:</label>
    <input type="text" id="first_name" name="first_name"></input>
  </div>
  <div>
    <label for="last_name">Last Name:</label>
    <input type="text" id="last_name" name="last_name"></input>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"></input>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>
</body>
</html>

Comments

  1. Useful Information, your blog is sharing unique information....
    Thanks for sharing!!!Software Development company Lucknow

    ReplyDelete
  2. Very nice post here thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's

    web design

    ReplyDelete
  3. Thanks for sharing an informative post about Graphic Designing with a very efficient way.
    web design training in mumbai
    web development in mumbai

    ReplyDelete
  4. This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post! Thank you a lot! and if you need Software House In Karachi then contact us!

    ReplyDelete

Post a Comment

Popular posts from this blog

layout code example:-

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body>  <section>       <div class="container">         <header>           <h3  class="text-center">Services</h3>           <p class="text-center">Laudem latine pe

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax.

Juqery fade

jQuery Fading Methods :-  With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element. Syntax:- $(selector).fadeIn(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><