JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<form id="form1" name="login" method="post" action="mainpage.html">
                <div class="loginpanel">
				    <div>	
					    <input type="text" id="emailid" name="emailid" 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>               
            </form>

JavaScript

$(function (){
		 $("#form1").validate({
        // Specify the validation rules
        rules: {
            emailid: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        },
        
        // Specify the validation error messages
        messages: {
            username: "Please enter a valid email address",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
                            submitHandler: function (form) { // for demo
                             $('#username').focus();
                             $('#submit').click(function () {
                                 event.preventDefault(); // prevent PageReLoad                                
                                 var ValEmail = $('#username').val() === 'admin@admin.com'; // Email Value
                                 alert("Email" + ValEmail);
                                 var ValPassword = $('#password').val() === 'admin1234'; // Password Value
                                 if (ValEmail === true && ValPassword === true) { // if ValEmail & Val ValPass are as above
                                     alert('valid!'); // alert valid!
                                     window.location.href = "home_page.html";
                                     // go to home.html
                                 }
                                 else {
                                     alert('not valid!'); // alert not valid!
                                 }
                             });
                         }
        }

        
    });

  });