<div dir="ltr"><div class="gmail_extra"><br><div class="gmail_quote">On Sun, Jan 29, 2017 at 12:27 PM, Harald Pehl <span dir="ltr"><<a target="_blank" href="mailto:hpehl@redhat.com">hpehl@redhat.com</a>></span> wrote:<br><blockquote style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex" class="gmail_quote"><br>
Some attributes have relationships to other attributes. Basically<br>
there are two different kind oif relationships:<br></blockquote><div><br></div><div>This is a pretty common requirement, but sadly I haven't found anything sophisticated enough to handle these sorts of multi-field validations - most libraries focus on individual fields (this field is required, this must be an email address, etc) but not constraints between them (this field is required only if another optional field is set).<br></div><div><br>If you're using traditional forms (that is, submitting to server side as a POST), I'd suggest using something like this: <br><br></div><blockquote style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex" class="gmail_quote">
1. Requires: One attribute requires another one<br></blockquote><div><br></div><div>Add an input handler to the first input, and on every change, determine whether to show/hide the corresponding field. For example, if you are collecting a State for addresses in the United States, but only country otherwise, then you can add an oninput handler to the country field and show/hide the corresponding field by adding/removing the "hidden" class and "disabled" attribute (to prevent it from being submitted with your form). For best results, you'll also need to replicate the logic on the server side (or figure out a way to share them, since I see you're using GWT).<br><br></div><div>If you have multiple fields, which are optional (if all are left blank) or required (if any one of them are filled in), I suggest hiding them behind a checkbox control that corresponds to a condition like "my billing address and contact address are different", where checking the box should unhide several controls and mark them all as required.<br></div> <blockquote style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex" class="gmail_quote">
2. Alternatives: Alternative attributes are mutually exclusive. Only<br>
one attribute can be set.<br></blockquote><div><br></div><div>If you start typing in one field, either disable or hide the other field, to make it clear that only one of them can be modified at a time. You can also use a dropdown or radio input for this.<br><br></div><div>I think you hit on the right thing in your design doc about progressive disclosure, and ideally you have someone versed in interaction design to help you design the right workflow for your use case, as I don't think there's any one-size-fits-all approach. In my opinion, there's no substitute for user research.<br><br></div><div>Jonathan<br></div></div></div></div>