Serge Van Haag Serge Van Haag - 9 months ago 52
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:


<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" />
<input type="password" class="login__input pass" placeholder="Password"/>
<button type="button" class="login__submit">Sign in</button>
<p class="login__signup">Don't have an account? &nbsp;<a>Sign up</a></p>


$(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)
animating = true;
var that = this;
ripple($(that), e);
setTimeout(function () {
setTimeout(function () {
}, submitPhase2 - 70);
setTimeout(function () {
animating = false;
$(that).removeClass("success processing");
}, submitPhase2);
}, submitPhase1);

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



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 Source

It's because this selector is bad:

$('input[pass] .login__input')

Here is correct: