Question

I’m trying to create fake login page with jQuery – purely for testing/template presentation purposes.

What form should do(see details in .js code):

Correct email: [e-mail] / pass: admin

• check the values of the #username & #password against values in the .js
• if return true for both values alert ‘valid’ and go to home.html
• if not valid alert ‘not valid’ and display the error msg

Code at jsfiddle http://jsfiddle.net/MrTest/ZYZPY/

HTML

<form class="loginbox" autocomplete="off">
    <fieldset>
        <p style="display: none;" class="error">Error. Please enter correct email &amp; password.</p>
        <label for="username">E-mail</label>
        <input type="text" id="username" />
        <label for="username">Password</label>
        <input type="password" id="password" />
        <input type="submit" id="submit" value="LOG IN" />
    </fieldset>
</form>

jQuery

$(document).ready(function() {
    $('#username').focus();

    $('#submit').click(function() {

        event.preventDefault(); // prevent PageReLoad
        $('.error').css('display', 'none'); // hide error msg

        var ValEmail = $('#username').val('[e-mail]'); // Email Value
        var ValPassword = $('#password').val('admin'); // Password Value

        if (ValEmail === true & ValPassword === true) { // if ValEmail & ValPass are as above
            alert('valid!'); // alert valid!
            window.location = "home.html"; // go to home.html
        }
        else {
            alert('not valid!'); // alert not valid!
            $('.error').css('display', 'block'); // show error msg
        }
    });
});

At the moment form always return else = false – why??

Any help much appreciated!
Pete

---

Working example: http://jsfiddle.net/MrTest/ZYZPY/12/

Answer 1

if (ValEmail === true & ValPassword === true) {

Should be && instead of &
And val is used to get the value of input, you should:

var ValidEmail = $('#username').val() === '[e-mail]'; // Email validate
var ValidPassword = $('#password').val() === 'admin'; // Password validate

if (ValidEmail === true && ValidPassword === true) { // if ValidEmail & ValidPassword  

A working fiddle: http://jsfiddle.net/DTGt9/