Trouble with jQuery Form Validation

Question

I'm making a form that has the following validation rules: no fields are "required", but if you enter an email, it must be valid, and if you enter a password, it must be at least 6 characters and match the confirm password field value.

The form works flawlessly with no validation so I know it's not a PHP or HTML problem.

Here's the jQuery code handling the form:

Updated Code

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

    $('#subSet').live('click',function() {
        //if any of the fields have a value
        if($("#chfn").val() != "" || $("#chln").val() != "" || $("#chpw").val() != "" || $("#chpw2").val() != "" || $("#chem").val() != "" || $("#chDefZone").val() != "Select Zone")
        {
            $ev = 1;
            $pv = 1;
            $("#profSet").validate({
                rules: {
                    chem: {
                        email: true
                    },
                    chpw: {
                        minlength: 6
                    },
                    chpw2: {
                        minlength: 6,
                        equalTo: "#chpw"
                    }
                },
                messages:{
                    chpw2: {
                        equalTo: "Passwords must be the same."
                    },
                    chpw: {
                        minlength: "Password must be at least 6 characters."
                    }
                }
            });
            //validates an email if there is one, trips the valid variable flag
            if($("#chem").val() != "")
            {
                if(!($("#profSet").valid()))
                {
                    $ev = 0;
                }
            }
            //if either password field is filled, start trying to validate it
            if($("#chpw").val() != "" || $("#chpw2").val() != "")
            {
                if(!($("#profSet").valid()))
                {
                    $pv = 0;
                }
            }
            //if those two were valid
            if($pv == 1 && $ev == 1)
            {
                $.post('php/profSet.php', $('#profSet').serialize(), function(){
                    $('#profSet').hide();
                    $('#success').show();
                });
            }               
            //if either was invalid, the error was already tripped, and this code exits here
        }
    });

Now the problem is that one of the invalidity flags was being tripped but I can't find where, the form should return valid under my tests.

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

equalTo takes a selector, not a value.

Change...

equalTo: $("#chpw").val()

...to...

equalTo: "#chpw"

...and you're good to go.

Update

BTW, you shouldn't need to explicitly check if the email (or any other field) is blank before validating. Just don't include the required: true. It should then only validate it if the value is present.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 13, 2011 at 0:07

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AKor Over a year ago

That certainly helped - the errors show and hide themselves as needed. It still isn't submitting, which means one of the invalidity flags has been tripped. I've posted updated code.

Collectives™ on Stack Overflow

Trouble with jQuery Form Validation

1 Answer 1

Update

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related