Question

I have a form for a user to change their settings. It has 5 fields – first name, last name, password, confirm password, and email address.

The only thing is that I have to make sure the passwords match and that the email is valid. A user can use any or all of the fields.

The possibilities, off the top of my head, are these:

• Text in all fields, passwords match, email is valid -> submit
• Text in only first name -> submit
• Text in only last name -> submit
• Text in both names -> submit
• Text in only email -> submit
• Text in only email and first name -> submit
• Text in only email and last name -> submit
• Text in email is invalid -> show invalid error, do not submit
• Text in password fields doesn’t match -> show different invalid error, do not submit

I’m using jQuery to handle all of this. Here’s my code so far:

$('#success').hide();
    $('#pwerror').hide();

    $('#subSet').live('click',function() {
        //if any of the fields have a value
        if($("#chfn").val() != "" || $("#chln").val() != "" || $("#chpw").val() != "" || $("#chpw2").val() != "" || $("#chem").val() != "")
        {
            //if the email field isn't empty (i.e. something is typed in), then check for email validation and post if valid
            if($("#chem").val() != "")
            {
                $("#profSet").validate({
                    rules: {
                        chem: {
                            email: true
                        }
                    }
                });
                if($("#profSet").valid())
                {
                    $.post('php/profSet.php', $('#profSet').serialize(), function(){
                        $('#profSet').hide();
                        $('#success').show();
                    });
                }
            }
            //checks if either of the password fields are filled
            if($("#chpw").val() != "" || $("#chpw2").val() != "")
            {
                //now checks if they are equal
                if($("#chpw").val() == $("#chpw2").val())
                {
                    $.post('php/profSet.php', $('#profSet').serialize(), function(){
                        $('#profSet').hide();
                        $('#success').show();
                    });
                }
                //if they aren't equal (which means if they are mismatching string, or if either one is blank), show error
                else
                {
                    $('#pwerror').show();
                }
            }
            //if it's not an email or password field, then just post, there are no conditionals for the first/last names
            if($("").val())
            {
                $.post('php/profSet.php', $('#profSet').serialize(), function(){
                    $('#profSet').hide();
                    $('#success').show();
                });
            }   
        }
    });

The problems with this code are clear, in terms of how I order my conditionals. Bad input may be submitted and not checked, if an earlier conditional is tripped.

Is there a way to make this form work without writing out nine different if statements?

Answer 1

The logic there seems pretty complex, so I don’t think there is any way to avoid nested if statements. You may want to make use of flag variables which might make it easier to read and diagnose logic problems…

So for instance:
var isEmail = false;

if($(“#chem”).val() != “”) { isEmail = true; }

Perhaps that might make it easier. Hope this helps.