JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
 <form id="form1" name="login" method="post" action="home_page.html">
                                    <div class="loginpanel">
				                        <div>	
					                        <input type="text" id="username" name="username" class="input-text" placeholder="name@domain.com"/><br/><br/>
					                        <input type="password" id="password" name="password" class="input-text" placeholder="password"/><div class="help_icon"><a href="#"><img src="Images/help-icon.png" /></a></div><br/><br/>
					                        <input type="submit" id="submit" value="Login" class="submit-button" />
				                        </div>
			                        </div>
                                    <div style="height:52px;">
                                        &nbsp;
                                    </div>
                                </form>

JavaScript

$(document).ready(function () {
                 $("#form1").validate({
                     debug: false,
                     errorClass: "error error_red",
                     rules: {
                         username: {
                             required: true,
                             email: true
                         },
                         password: {
                             required: true,
                             minlength: 5
                         }
                     },
                     messages: {
                         username: "Please enter a valid email address",
                         password: {
                             required: "Please provide a password",
                             minlength: "Your password must be at least 5 characters long"
                         },

                         success: function (data) { // for demo
                             $('#username').focus();
                         }
                     }
                 });
                 $('#submit').click(function () {
                     alert("check click");
                     var ValEmail = $('#username').val() == 'admin@admin.com'; // Email Value
                     alert("Email" + ValEmail);
                     var ValPassword = $('#password').val() === 'admin'; // Password Value
                     if (ValEmail === true && ValPassword === true) { // if ValEmail & Val ValPass are as above
                         alert('valid!'); // alert valid!
                         var site_url = 'home_page.html';
                         alert("site_url" + site_url);
                         jQuery("#submit").click(function (event) {
                             alert("submit click" + jQuery("#submit").click);
                             window.location.href = site_url + "event-form";
                         });
                         // go to home.html
                     }
                     else {
       ...