Member Avatar for 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>
  • 2 Contributors
  • 1 Reply
  • 308 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

— the behavior you describe is the classic case of “previous error not being cleared.” Before you run any new checks, remove or hide every error message so only the current, pertinent message is shown; also validate trimmed input (so a field of only spaces counts as empty). Adding per-field listeners that hide that field’s error as soon as the user types makes the UI feel responsive and prevents stale messages from piling up.

A compact pattern you can apply:

/* clear any prior messages */
$('.err-global, .err-email, .err-pass').text('').hide();

/* work with trimmed values */
var email = $.trim($('#loginEmail').val());
var password = $.trim($('#loginPassword').val());

if (!email) {
  $('.err-email').text('Please enter an email.').show();
  $('#loginEmail').focus();
  return;
}
if (!password) {
  $('.err-pass').text('Please enter a password.').show();
  $('#loginPassword').focus();
  return;
}

/* hide field error as user types */
$('#loginEmail').on('input', function(){ $('.err-email').text('').hide(); });
$('#loginPassword').on('input', function(){ $('.err-pass').text('').hide(); });

Also consider ’s security point: for server-side authentication failures return a single generic message so you do not reveal whether the username exists. That suggestion is compatible with field-level client validation — show specific messages for empty fields locally, but show a generic server message for “invalid credentials.” Finally, prefer toggling display (hide/show or CSS classes) instead of visibility so layout doesn’t reserve space, focus the first invalid field for usability, and always re-check on the server (client-side checks are only UX).

Member Avatar for Member #120589

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.

Edited by Member #120589
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.