0

I have a form with multiple address fields. I would like to only allow entry in one field if the previous field has been filled in. I am using jquery validate, and would like to continue to do so. The idea is that although none of these fields are actually required, except the first, you cannot leave gaps in the rest. So if field 3 is blank, you cannot have data in field 4. One way might be to only enable a field when data is entered into the previous, but not sure how to do that in this context.

2
  • 4
    It would help greatly if you post some of the actual code you're trying. It is hard to just imagine it. Commented Mar 24, 2013 at 15:40
  • I would highly suggest to make the validation server-side as well Commented Mar 24, 2013 at 15:41

3 Answers 3

6

Your explanation is somewhat unclear. I've never heard of anyone wanting to make fields stay empty on purpose... either they're required or they're optional.

This is a two-part answer:

1) Shows how to use depends option along with the :filled and :blank custom selectors. So application of rules can depend on whether another field is filled in or left empty.

2) Shows how to write a custom rule that gives an error if the field is not left empty.

The final jsFiddle at the end combines these two.


You can use a depends function to make the required rule dependent on another field.

In this example, all fields are initially "optional". However, each one depends on the previous. If field #1 is filled, then field #2 becomes required, etc. You could also use the :blank custom selector in place of the :filled to check the opposite.

You can change this around to suit almost any situation.

DEMO: http://jsfiddle.net/Rvhmd/

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field2: {
                required: {
                    depends: function (element) {
                        return $("#field1").is(":filled");
                    }
                }
            },
            field3: {
                required: {
                    depends: function (element) {
                        return $("#field2").is(":filled");
                    }
                }
            },
            field4: {
                required: {
                    depends: function (element) {
                        return $("#field3").is(":filled");
                    }
                }
            }
        }
    });

});

HTML:

<form id="myform">
    <input type="text" name="field1" id="field1" />
    <input type="text" name="field2" id="field2" />
    <input type="text" name="field3" id="field3" />
    <input type="text" name="field4" id="field4" />
    <input type="submit" />
</form>

To give the OP what he requests, here is a custom method/rule called empty that will give an error if the field is not empty.

$(document).ready(function () {

    $.validator.addMethod('empty', function(value, element) {
        return (value === '');
    }, "This field must remain empty!");

    $('#myform').validate({ // initialize the plugin
        rules: {
            field: {
                empty: true  // error if field is not empty
            }
        }
    });

});

Working DEMO: http://jsfiddle.net/4C2U3/


You could combine this custom empty rule with the depends option above to achieve whatever you'd like.

        rules: {
            field: {
                empty: {
                    depends: function (element) {
                        return $("#other_field").is(":blank");
                    }
                }
            }
        }

This is the closest to what I think the OP wants:

http://jsfiddle.net/qCJ8T/

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

Comments

0

Following up on my comment above.

With basic jquery selectors you can select "previous" elements using the .prev() traversing function.

In pseudo-code terms, you may do something like

if ( anAddressTextBox.prev().val() != '' ) { // ps: again, this is pseudo-code
  // allow current text object
}

You may also want to look at .closest() and .siblings()

Validate the above part with matching class names so you be sure you are always in your address scope of fields. (i.e: not checking another random field which is not an address text box )

Add some of your html/js/jquery code so SO community will be able to provide better solutions :)

1 Comment

What's this have to do with the jQuery Validate plugin?
0

Pending your requirements in the answer above, by using a maxlength = 0 validation, we were able to have a valid but required empty field. It came from the jquery validate support forum:

rules: {
    "fieldName" : {maxlength:0}
}

Of course you'll need to modify the rest, but this was an easy way for us to have a field be valid only if it's blank (aka maxlength = 0)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.