I am trying to make a login form in which I have email address and password as the textbox. I have done the validation on the email address part so that it should have proper email address and also on the empty check both for email address and password text box.
Here is my jsfiddle.
As of now, I have added an alert box saying, Invalid if email address and password textbox is empty. Instead of that, I would like to show a simple message just below each text box saying , please enter your email address or password if they are empty?
Just like it has been done here on sitepoint blog.
Is this possible to do in my current HTML form?
Update:-
<body>
<div id="login">
<h2>
<span class="fontawesome-lock"></span>Sign In
</h2>
<form action="login" method="POST">
<fieldset>
<p>
<label for="email">E-mail address</label>
</p>
<p>
<input type="email" id="email" name="email">
</p>
<p>
<label for="password">Password</label>
</p>
<p>
<input type="password" name="password" id="password">
</p>
<p>
<input type="submit" value="Sign In">
</p>
</fieldset>
</form>
</div>
<!-- end login -->
</body>
And my JS -
<script>
$(document).ready(function() {
$('form').on('submit', function (e) {
e.preventDefault();
if (!$('#email').val()) {
if ($("#email").parent().next(".validation").length == 0) // only add if not added
{
$("#email").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter email address</div>");
}
} else {
$("#email").parent().next(".validation").remove(); // remove it
}
if (!$('#password').val()) {
if ($("#password").parent().next(".validation").length == 0) // only add if not added
{
$("#password").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>");
}
} else {
$("#password").parent().next(".validation").remove(); // remove it
}
});
});
</script>
I am working with JSP and Servlets so as soon as I click Sign In button, it was taking me to another page with valid email and password earlier but now nothing is happening after I click Sign In button with valid email and password.
Any thoughts what could be wrong?
