show pertinent error messages

[pelusa]

I have two input fields, username, and password. I perform a basic check for empty value for each, if either is empty the return is false and so the .$ajax request does not get executed. That works.

I would like to ask for help to enhance the check for empty value, and the return false.

If an email is entered, but no password, then I get password message error, and return false, but if then I enter password, no email, I then get the enter email error, but the password error stays on the page even if the previously entered value was not removed. this causes in the end to have both messages appear on the page, and that is misleading.

Same happens in the case of password, same steps.

It is important for my task to ensure the values are entered and the pertinent messages are displayed correctly, before te .$ajax request

Below there is a copy of my script. I hope someone has time to give me some help.

Thank you very much.

<script type="text/javascript">
    function ShoppingCartLogin() {
        var userid = $(".YourOrder_MainLoginEmail").val();
        var password = $(".YourOrder_MainLoginPassword").val();
        var url = "/ShoppingCart/ShoppingCartLogin";

        if (userid == "") {
            $('.YourOrder_loginError').css('visibility', 'visible');
            $('.YourOrder_loginError').text('Enter your e-mail address.');
            return false
        } 
        if (password == "") {
            $('.YourOrder_loginError_password').css('visibility', 'visible');
            $('.YourOrder_loginError_password').text('Enter your password.');
            return false
        } 
        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: { userId: userid, pass: password },//{ userId: userid, pass: password },
            cache: false,
            success: function (result) {
                if (result.success == "Valid") {
                    // hide the login form and clear and hide error
                    $('.YourOrder_loginError').text('');
                    $('.YourOrder_loginError').css('visibility', 'hidden');
                    $('.YourOrder_loginForm').css('visibility', 'hidden');
                    // show the shipping address section
                    $('.YourOrder_ShipAddress').css('visibility', 'visible');
                    location.reload();
                }
                if (result.error == "Invalid") {
                    // hide shipping address section
                    $('.YourOrder_ShipAddress').css('visibility', 'hidden');
                    $('.YourOrder_loginError').css('visibility', 'visible');
                    $('.YourOrder_loginError').text('The user name or password provided is incorrect.');

                }
            }
        });

    }
</script>

I suggest that you give just one error msg - "Incorrect username/email or password". You do not want to give malicious users any more info than necessary.

So have a msg div

<div id="msg"></div>

Below the form and set all css in css. Pass "Incorrect username/email or password" depending on result value. If result is true, then session variable should store login = username and login form should be unavailable until logout.