Login Form – jQuery Form Validation Plugin

I have login form where are email and password required. I’m using jQuery Validate plugin for validation. I don’t see where is mistake, but plugin doesn’t generate any error message – it doesn’t add class to input or label.

Here is code:

HTML

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Login</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="icon" href="assets/favicon_winglio.ico" type="image/x-icon" />

</head>

<body id="login">

<div class="container">
    <h1>Login</h1>
    <div class="red-line"></div>
    <p class="email-sent">Your password reset email has been sent.</p>
    <section class="login">
        <div class="login-header">
            <svg version="1.1" id="login-triangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" x="0px" y="0px" viewBox="0 0 490 143" enable-background="new 0 0 186 143" preserveAspectRatio="xMinYMin meet" xml:space="preserve">
                <polygon opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" points="0,143 0,0,490,0 "/>
                <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="490,0 490,143 -0.1,143 "/>
            </svg>

            <a href="index.html" class="login-logo-link"><img src="assets/logo_menu_white.png" alt="" class="login-logo"></a>
        </div>
        <div class="login-form-holder">
            <form id="form-login" method="POST" action="">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="Email address" class="input-login email-address required">
                <input type="password" name="password" placeholder="Create password" class="input-login create-password required">
                <a href="forgot-password.html" class="forgot-password">FORGOT PASSWORD?</a><br>
                <input value="LOGIN" class="btn-login waves-effect waves-light" type="submit">
            </form>
        </div>
    </section>
    <p class="new-customer">New customer? <a href="signup.html">SIGN UP</a></p>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<!-- Custom script -->
<script src="js/main.js"></script>

</body>
</html>

CSS

#login .input-login, #signup .input-login, #forgot-password .input-login {

    margin: 0;
    padding: 0;
    background: none;
    color: #b5b5b5;
    border: none;
    border-bottom: 2px solid #dbdbdb;
    width: 100%;
    text-indent: 45px;
    padding: 25px 0px;
    font-size: 16px;
    -webkit-appearance: none;
    border-radius: 0;
}

#login .input-login:focus, #signup .input-login:focus, #forgot-password .input-login:focus {
    outline: none;
}

#login .email-address, #signup .your-name, #signup .email-address, #forgot-password .email-address {
    margin-bottom: 25px;
}

#login .email-address, #signup .email-address, #forgot-password .email-address {
    background: url('../assets/email_address_grey.svg') no-repeat;
    background-size: auto 30px;
    background-position: left center;
}

#login .create-password, #signup .create-password {
    background: url('../assets/password_grey.svg') no-repeat;
    background-size: auto 30px;
    background-position: left center;
}

#signup .your-name {
    background: url('../assets/your_name_grey.svg') no-repeat;
    background-size: auto 30px;
    background-position: left center;
}

#login .forgot-password, #signup .forgot-password {
    text-align: right;
    display: block;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #ff204a;
}

#login .forgot-password:hover, #signup .forgot-password:hover {
    color: #de1c40;
    text-decoration: none;
}

#signup .agree-terms {
    font-size: 10px;
    margin-top: 30px;
    color: #5b5b5b;
}

.agree-terms a {
    color: #ff204a;
    padding-bottom: 2px;
    border-bottom: 2px solid #ff204a;
    font-weight: 500;
}

.agree-terms a:hover {
    text-decoration: none;
}

#forgot-password .remark {
    clear: both;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.8;
    color: #5b5b5b;
}

#signup-successful.container {
    max-width: 430px;
    width: 100%;
    color: #fff;
}

#signup-successful .signup-name {
    font-style: italic;
    margin-bottom: 0;
}

#signup-successful .name {
    font-weight: 200;
    font-size: 36px;
}

#signup-successful .red-line {
    margin-top: 15px;
}

#signup-successful .email-sent {
    margin-bottom: 35px;
}

#signup-successful .message-recieved {
    font-size: 12px;
    line-height: 2.2;
    margin-bottom: 100px;
    color: #b5b5b5;
}

#form-login input.error {
border:1px solid red;
}

jQuery

$(document).ready(function(){
    $('#form-login').validate({ // initialize the plugin
        rules: {
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        },

        messages: {
            email: {
                required: "Please enter your email address."
            }
        }
    });

});


Source: forms

Leave a Reply