javascript - jQuery Validation - Changing "Required" Attribute based on other fields - Stack Overflow

admin管理员组

文章数量:1301533

I'm using the jQuery Validation plugin () on a form I'm building. The form is made up of 6 fieldsets, each containing 3 text inputs for an email address, a first name and a last name. A simplified version of the markup is like so:

<form id="ref" action="submit.php" method="post">
    <fieldset id="ref_1">
        <input id="ref_1_email" type="text" />
        <input id="ref_1_fname" type="text" />
        <input id="ref_1_lname" type="text" />
    </fieldset>
    <fieldset id="ref_2">
        <input id="ref_2_email" type="text" />
        <input id="ref_2_fname" type="text" />
        <input id="ref_2_lname" type="text" />
    </fieldset>
    <fieldset id="ref_3">
        <input id="ref_3_email" type="text" />
        <input id="ref_3_fname" type="text" />
        <input id="ref_3_lname" type="text" />
    </fieldset>
</form>

and so forth, up to ref_6. However, the user does not necessarily need to plete every field - they may only choose to fill in the inputs inside fieldset#ref_1 and fieldset#ref_2, and leave the others blank. But if they enter, for example, an email for ref_1, a first and last name for ref_1 would be required also. So what I need to do is check all 3 inputs in a fieldset. If they are all blank, they can be ignored, however if one of the inputs is filled in, it's two neighbours must be pleted also. All my attempts so far have been very cumbersome (watching for a change on each one and then evaluating to see if empty...), any help would be greatly, greatly appreciated.

Thanks

Update:

I found a post with a similar issue, with the suggested solution being:

$('#emailToName2').keyup(function () {
    $('#emailToAddress2').toggleClass('required', $(this).val());
});

But that requires the above logic duplicated for each and every input, which seems like overkill to me. What would be a more dynamic approach?

Cheers!

I'm using the jQuery Validation plugin (http://docs.jquery./Plugins/Validation) on a form I'm building. The form is made up of 6 fieldsets, each containing 3 text inputs for an email address, a first name and a last name. A simplified version of the markup is like so:

<form id="ref" action="submit.php" method="post">
    <fieldset id="ref_1">
        <input id="ref_1_email" type="text" />
        <input id="ref_1_fname" type="text" />
        <input id="ref_1_lname" type="text" />
    </fieldset>
    <fieldset id="ref_2">
        <input id="ref_2_email" type="text" />
        <input id="ref_2_fname" type="text" />
        <input id="ref_2_lname" type="text" />
    </fieldset>
    <fieldset id="ref_3">
        <input id="ref_3_email" type="text" />
        <input id="ref_3_fname" type="text" />
        <input id="ref_3_lname" type="text" />
    </fieldset>
</form>

and so forth, up to ref_6. However, the user does not necessarily need to plete every field - they may only choose to fill in the inputs inside fieldset#ref_1 and fieldset#ref_2, and leave the others blank. But if they enter, for example, an email for ref_1, a first and last name for ref_1 would be required also. So what I need to do is check all 3 inputs in a fieldset. If they are all blank, they can be ignored, however if one of the inputs is filled in, it's two neighbours must be pleted also. All my attempts so far have been very cumbersome (watching for a change on each one and then evaluating to see if empty...), any help would be greatly, greatly appreciated.

Thanks

Update:

I found a post with a similar issue, with the suggested solution being:

$('#emailToName2').keyup(function () {
    $('#emailToAddress2').toggleClass('required', $(this).val());
});

But that requires the above logic duplicated for each and every input, which seems like overkill to me. What would be a more dynamic approach?

Cheers!

• javascript
• jquery
• validation

Share Follow edited Jun 26, 2011 at 8:54 abatishchev 100k8888 gold badges301301 silver badges442442 bronze badges asked Nov 16, 2009 at 14:14 AlvinRowAlvinRow 5111 silver badge55 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You can specify an expression or callback when indicating that a field is required. The validation plugin will then evaluate the expression or callback before validating the field.

Here's an example:

$("#ref").validate({
  rules: {
    ref_1_email: {
      required: function(element) {
        return $("#ref_1_fname").val() || $("ref_1_lname").val();
      }
    }
  }
});
$("#ref_1_email").blur(function() {
  $("#ref_1_fname").valid();
  $("#ref_1_lname").valid();
});

There's probably some refactoring that you can do so that you don't have to repeat all of this for each field...

You can write your own custom validation class that evaluates if the other either of the 2 inputs have been pleted.

eg.

jQuery.validator.addMethod('MyOwnValidator', function(value, element) {
    var required = false;
    $(element).parent().children('input').each(function() {
       if($(this).val() && $(this).attr('id') != $(element).attr('id')){
           required = true;
       }
    });
    return !required;
});

This will evaluate if any of the sibling inputs have a value and if they do it makes the calling input required.

Not tried and neither properly written:

$("#ref input").keyup(function () {
 $(this).parents("fieldset").children("input").toggleClass("required", $(this).val());
});

You cant do it all in one loop, since you need to check siblings before toggling the class. You can, however, define a small loop function that can check and apply, but you will need to call it several times to maintain logic.

Try this:

var loop = function(target, fn) {
    var t = 0, fn = fn || function(){};
    $(target).siblings().andSelf().each(function(i, el) {
        t += $(el).val().length;
        fn(el);
    });
    return t;
}
$('fieldset input').each(function() {
    $(this).bind('blur', function(e) {
        if(loop(e.target)) {
            loop(e.target, function(el) {
                $(el).toggleClass('required', !$(el).val().length);
            })
        } else {
            loop(e.target, function(el) {
                $(el).removeClass('required');
            })
        }
    });
});

Was just investigating this for a project. According to the docs, the following should do what you want.

When first calling validate on your form, do it like this:

$("#emailRecsForm").validate({
   rules: {
       ref_1_email: {
         required: ("#ref_1_fname:filled" || "#ref_1_lname:filled"),
         email: true
       },
       ref_1_fname: {
         required: ("#ref_1_email:filled" || "#ref_1_lname:filled")
       },
       ref_1_lname: {
         required: ("#ref_1_email:filled" || "#ref_1_fname:filled")
       },

       ref_2_email: {
         required: ("#ref_2_fname:filled" || "#ref_2_lname:filled"),
         email: true
       },
       // And so on...
   }
});

Also, make sure each of your inputs has a name attribute identical to its id.

I haven't actually tried it myself, but judging by the docs (see required(dependency-expression)), it should work.

本文标签： javascriptjQuery ValidationChanging quotRequiredquot Attribute based on other fieldsStack Overflow