开发者

Trying to visualize a semi-complicated form submit

开发者 https://www.devze.com 2023-02-15 22:22 出处:网络
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.

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();
                        $('#su开发者_开发知识库ccess').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?


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.


Just to clarify, you want your form submission to be valid as long as:

  1. The e-mail, if provided, is valid
  2. The password, if provided, must match the password confirmation

Is this correct? If so, why not just do something like this:

if (!isEmailValid()) // <-- You need to define how this function works
    // Show error message and stop form submission

if ($("#password").val() != $("#password_confirm").val())
    // Show error message and stop form validation

// No issue with e-mail or password/password confirmation! Let the form submission go through!
0

精彩评论

暂无评论...
验证码 换一张
取 消