Serge Van Haag Serge Van Haag - 1 month ago 5
HTML Question

HTML and Javascript Client-Side Authentication

I am creating a client-side verification (Yes, this seems to serve no purpose but it does). The problem is that I am not so good with js and my code don't work.

•What I'm trying to accomplish:

User types "ABCD" as a password and clicks on submit.
Javascript checks if password is "ABCD" and if so, it continues, if not, it displays an error message.

• The Code:

HTML :

<div class="login">
<div class="login__check"></div>
<div class="login__form">
<div class="login__row">
<svg class="login__icon pass svg-icon" viewBox="0 0 20 20">
<path d="M0,20 20,20 20,8 0,8z M10,13 10,16z M4,8 a6,8 0 0,1 12,0" />
</svg>
<input type="password" class="login__input pass" placeholder="Password"/>
</div>
<button type="button" class="login__submit">Sign in</button>
<p class="login__signup">Don't have an account? &nbsp;<a>Sign up</a></p>
</div>
</div>


JAVASCRIPT :

$(document).on("click", ".login__submit", function (e) {

var password = "ABCD";
//this is your password input box
if ($('input[pass] .login__input').val() == password) {
if (animating)
return;
animating = true;
var that = this;
ripple($(that), e);
$(that).addClass("processing");
setTimeout(function () {
$(that).addClass("success");
setTimeout(function () {
$app.show();
$app.css("top");
$app.addClass("active");
}, submitPhase2 - 70);
setTimeout(function () {
$login.hide();
$login.addClass("inactive");
animating = false;
$(that).removeClass("success processing");
}, submitPhase2);
}, submitPhase1);

} else {
alert('Wrong pass!');
}

});


THE EXACT PROBLEM:

index.js always generates a 'wrong pass' message. So that means that
if ($('input[pass] .login__input').val() == password) {
is never true. Why is this never true, even when I use "ABCD"?

Thanks everyone!

Answer

It's because this selector is bad:

$('input[pass] .login__input')

Here is correct:

$('.login__input.pass')
Comments