In this tutorial we learn how to “create a Login system & jquery validation“. The prestored username, password are verified from database whether both exists or not in our database, this is done using PHP script.
HTML File: login.html
First we create a simple HTML form with two fields- Email and Password. jQuery validation is used for email and password to ensure that they are valid or not .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <title>Login Form Using jQuery †Demo Preview</title> <meta name="robots" content="noindex, nofollow"> <!â€â€ Include CSS File Here â€â€> <link rel="stylesheet" href="css/style.css"/> <!â€â€ Include CSS File Here â€â€> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.1 1.1/jquery.min.js"></script> <script type="text/javascript" src="js/login.js"></script> </head> <body> <div class="container"> <div class="main"> <form class="form" method="post" action="#"> <h2>Create Login Form Using jQuery</h2> <label>Email :</label> <input type="text" name="demail" id="email"> <label>Password :</label> <input type="password" name="password" id="password"> <input type="button" name="login" id="login" value="Login"> </form> </div> </div> </body> </html> |
jQuery File: login.js
After create HTML page we create a jQuery file named login.js which performs validation on data that user fill in filelds. The following is the code of jQuery file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | $(document).ready(function(){ $("#login").click(function(){ var email = $("#email").val(); var password = $("#password").val(); //checking for blank fields if( email =='' || password =='') { $('input[type="text"],input[type="password"]').css("border","2px solid red"); $('input[type="text"],input[type="password"]').css("box-shadow","0 0 3px red"); alert("Please fill all fields...!!!!!!"); } else if(!(validateEmail(email))) { alert('Invalid Email address'); } else { $.post("login.php",{ name1: name, email1: email, password1:password}, function(data) { if(data=='Successfully Logged in...') { $("form")[0].reset(); } alert(data); }) } }); }); function validateEmail(email) { var filter=/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(filter.test(email)) { return true; } else { return false; } } |
PHP Script: login.php
The following is a PHP script which check whether username and password are existing in a database or not.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <?php // Establishing connection with server.. $connection = mysql_connect("localhost", "root", ""); // Selecting Database $db = mysql_select_db("college", $connection); //Fetching Values from URL $email=$_POST['email1']; $password= sha1($_POST['password1']); // Password Encryption, If you like you can also leave sha1 // check if e-mail address syntax is valid or not $email = filter_var($email, FILTER_SANITIZE_EMAIL); // sanitizing email(Remove unexpected symbol like <,>,?,#,!, etc.) //matching user input email and password with stored email and password in database $result = mysql_query("SELECT * FROM registration WHERE email='$email' AND password='$password'"); $data = mysql_num_rows($result); if($data==1) { echo "Successfully Logged in..."; } else { echo "Email or Password is wrong...!!!!"; } //connection closed mysql_close ($connection); ?> |
CSS File: style.css
The following is CSS file used to style your HTML page to make a Login system & jquery validation.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | /* Below line is used for online Google font */ @import url(http://fonts.googleapis.com/css?family=Droid+Ser if); h2{ textâ€align: center; fontâ€size: 24px; } hr{ marginâ€bottom: 30px; } div.container{ width: 960px; height: 610px; margin:50px auto; fontâ€family: 'Droid Serif', serif; position:relative; } div.main{ width: 320px; marginâ€top: 80px; float:left; padding: 10px 55px 40px; backgroundâ€color: rgba(187, 255, 184, 0.65); border: 15px solid white; boxâ€shadow: 0 0 10px; borderâ€radius: 2px; fontâ€size: 13px; } input[type=text],[type=password] { width: 97.7%; height: 34px; paddingâ€left: 5px; marginâ€bottom: 20px; marginâ€top: 8px; boxâ€shadow: 0 0 5px #00F5FF; border: 2px solid #00F5FF; color: #4f4f4f; fontâ€size: 16px; } label{ color: #464646; textâ€shadow: 0 1px 0 #fff; fontâ€size: 14px; fontâ€weight: bold; } #login { width: 100%; background: linearâ€gradient(#22abe9 5%, #36caf0 100%); border: 1px solid #0F799E; fontâ€size: 20px; marginâ€top: 15px; padding: 8px; fontâ€weight: bold; cursor: pointer; color: white; textâ€shadow: 0px 1px 0px #13506D; } #login:hover{ background: linearâ€gradient(#36caf0 5%, #22abe9 100%); } |
Login system & jquery validation
The above mentioned topic name was explained with code.If you have any queries, you can ask the question in the Forum Section.