Check for values before jQuery.ajax$ request

Question

The script I have is working good when executed, and it returns the server side error as expected.

I would like to learn how to use jquery to check if the values (userid, password) to be passed is empty, before the script runs the .$ajax request, and only get to that part if both values are filled in.

This is the jQuery

    var userid = $(".YourOrder_MainLoginEmail").val();
    var password = $(".YourOrder_MainLoginPassword").val();
    var url = "/ShoppingCart/ShoppingCartLogin";

    $.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.');

            }
        }
    });

Thank you very much for your help. - itortu.

EDIT

Can I get help making the check a bit better?

This is what is happening:

1- yes email, no password : password message error enter password, no email: enter email error, but password error remains even with password value in it, so in the end both messages are shown.

2- yes password, no email : email message error enter email, no password: enter password error, but email error remains even with email value in it, so in the end both messages are shown.

how can this change to only show/ hide pertinent messages and avoid having both displaying after the value for the first error message has been filled?

JQuery

    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
    } 

Many thanks for your help.

Answer 1

Ehh, just check them?

if (userid == "" || password == "") { return false }

//AJAX and so on.. script will jump out if either userid or password is empty

Answer 2

var userid = $(".YourOrder_MainLoginEmail").val();
var password = $(".YourOrder_MainLoginPassword").val();
var url = "/ShoppingCart/ShoppingCartLogin";

if(userid=='' || password=='' ){
    alert("Fill in complete details");
}
else {
    $.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.');

        }
     }
  });
}