<style>
    form label.error,
    #mailErr {
        color: #ff0000;
    }
</style>
<div class="login-wrap">
    <div class="login-box-cover-outter forget-box-cover-outter">
        <div class="login-box-cover">
            <div class="login-heading">
                <!-- <h3>Welcome To</h3>-->
                <h2>Erisn Classroom<br> Admin Portal</h2>
            </div>
            <div class="login-box">
                <h3>Forgot Password?</h3>
                <form id="restPasswordForm" method="post">
                    <div class="login-row">
                        <p>Please enter your email address verify for sending link to change password.</p>
                    </div>
                    <div class="login-row">
                        <label class="login-lbl">
                            Email Address*
                        </label>
                        <input type="text" onkeydown="hideMessages()" name="email" placeholder="Enter email address">
                        <p class="loginErr" style="display : none">Entered email-id does not exist</p>
                    </div>
                    <p id="mailErr" style="display : none;">Mail could not be sent, Please try again later</p>
                    <p class="loading" style="display:none">Please wait....</p>
                    <p class="loginSuccess" style="display : none">An email has been sent to your email id with link to reset your password. Click on the link to reset your password.</p>
                    <div class="login-row">
                        <button class="common-btn">Submit</button>
                    </div>
                </form>
                <div class="backto-login">
                    <a href="<?php echo base_url() ?>admin"> &lt; Back to login </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function hideMessages() {

        $('.loginErr').hide();
        $('.loginSuccess').hide();
        $('#mailErr').hide();
    }

    jQuery.validator.addMethod("emailregex", function(value, element) {

        return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/.test(value);

    }, 'Email Address is invalid: Please enter a valid email address.');



    $("#restPasswordForm").validate({
        ignore: ":hidden",
        rules: {
            email: {
                required: true,
                email: true,
                emailregex: true
            }

        },
        messages: {
            email: {
                required: "Please enter your email id",
            },
        },
        submitHandler: function(form) {
            var flag = false;

            emailValue = $('input[name="email"]', form).val();

            $.ajax({
                method: 'POST',
                url: '<?php echo base_url() ?>/admin/ajax_send_password_email',
                data: {
                    email: emailValue
                },

                beforeSend: function() {

                    $('.loading').show();
                    $('.common-btn').hover(function() {
                        $(this).css({
                            'cursor': 'wait'
                        })
                    });
                    $(document.body).css({
                        'cursor': 'wait'
                    });
                },
                success: function(data) {
                    // console.log(data);
                    $('.loading').hide();
                    $(document.body).css({
                        'cursor': 'default'
                    });
                    $('.common-btn').hover(function() {
                        $(this).css({
                            'cursor': 'pointer'
                        })
                    });

                    if (data == 'failed') {
                        $('.loginErr').show();
                    }

                    if (data == 'success') {
                        $('.loginSuccess').show();
                    }

                    if (data == 'mailErr') {
                        $('#mailErr').show();
                    }
                }
            })
            // form.submit();              
        }
    });
</script>