CODEWITHSUNDEEP
javascriptjqueryvalidation
Nick Price
Nick Price

Reputation: 963

JQuery Validator plugin validating conditions

I am having a few issues validating my data fully with the validator plugin.
I have 2 fields; fieldOne and fieldTwo. I then have 2 PHP files, process.php and processfailed.php.

Now I have quite a few conditions.

If fieldOne and fieldTwo are both empty, I want the error to display to the user but no PHP file called.

If one of the fields has valid data, and the other has invalid data or is empty, I want it to call process.php (I dont want a validation error event to occur).

Only if both fields have invalid data do I want processfailed.php to be called, from within the validation error event.

The code I have so far is this (removed some sections to shorten it)

var validator = $("#my_form").validate({
    rules: {
        fieldOne: {
            require_from_group: [1, '.datagroup'],
            maxlength: 40
        },
        fieldTwo: {
            require_from_group: [1, '.datagroup'],
            minlength: 8
        }
    },
    groups: {
        datagroup: "fieldOne fieldTwo"
    },
    submitHandler: function (form) {
        $.ajax({
            type: "POST",
            url: "process.php",
            data: {
                'fieldOne': $("#fieldOne").val(),
                'fieldTwo': $("#fieldTwo").val()
            }
        })
        return false;
    },
    invalidHandler: function (form, validator) {
        /* Submit the form even if validation fails: */
        $.ajax({
            type: "POST",
            url: "processfailed.php",
            data: {
                'fieldOne': $("#fieldOne").val(),
                'fieldTwo': $("#fieldTwo").val()
            }
        })
        return false;
    }
});

In regards to them both being empty, at the moment it displays the error to the user, but it also appears to be calling processfailed.php as well (I dont want any php file called in this situation).

If I give valid data to one field and leave the other empty, this seems to work.

If I give valid data to one field and give invalid data to the other, this seems to call processfailed.php when it should call process.php (as long as one field is valid that is ok).

If I give invalid data to both fields (they both fail validation) the processfailed.php seems to be called as it should be.

So how can I handle both fields being empty (not to call any php file) and if one field is valid and the other invalid to call process.php and not processfailed.php.

Any advice appreciated.

Upvotes: 0

Views: 65

Answers (1)

John S
John S

Reputation: 21492

For the first condition where both fields are empty, you can just place an if-statement in the invalidHandler method.

In order to not apply the validation to one of the fields when the other is valid, you could use the depends property of the rules.

$("#my_form").validate({
    rules: {
        fieldOne: {
            require_from_group: [1, '.datagroup'],
            maxlength: {
                param: 2,
                depends: function(element) {
                    var valTwo = $('#fieldTwo').val();
                    return !valTwo || (valTwo.length < 8);
                }
            }
        },
        fieldTwo: {
            require_from_group: [1, '.datagroup'],
            minlength: {
                param: 8,
                depends: function(element) {
                    var valOne = $('#fieldOne').val();
                    return !valOne || (valOne.length > 2);
                }                
            }
        }
    },
    submitHandler: function (form) {
        alert("process");
        return false;
    },
    invalidHandler: function (event, validator) {
        if ($('#fieldOne').val() || $('#fieldTwo').val()) {
            alert('processfailed');
        } else {
            alert('empty');
        }
        return false;
    }
});

jsfiddle

I removed the groups property because it causes all messages to get displayed next to the first field, which doesn't seem correct when the message is because the second field violates the minlength rule.

Note: The first parameter to the invalidHandler function is the event object, not the form element, but you can get the form element using event.target.

Upvotes: 1

Related Questions