Validating one or the other

Question

I've created a javascript function that allows me to validate if one field or the other is filled (called, shockingly enough, oneortheother). Essentially, it checks if neither is filled, or both, and throws an error.

One of the fields being validated is a input type="file" field. I'm displaying below the field the existing file, so that the users can see if it's the file they want.

Is there any way to still validate via oneortheother without having a value in the input type="file"? Any kind of javascript trickery?

I'm at wits end at this point, and have a demo later today that needs this functionality, so any help would be greatly appreciated.

EDIT:

As requested, here's some examples:

<label for="pdf">Upload PDF:
<span class="fieldnote">Files of type .pdf</span>
</label>
<input type="file" name="pdf" id="pdf" class="external_form_field oneortheother_url" value="/downloads/white_papers/HigherOrderPerl.pdf"  />
<label>Existing file:</label><span class="preview"><a href="/downloads/white_papers/HigherOrderPerl.pdf" target="_blank">HigherOrderPerl.pdf</a></span>
<label for="url">Link to asset:</label>
<input type="text" name="url" id="url" class="external_form_field oneortheother_pdf" value=""  size="25" />

Notice that the class oneortheother_url and oneortheother_pdf are applied. This allows the validation routine to know which field to compare to. The comparison is:

if (fObj.value && fObj2.value) { }

and

if (!fObj.value && !fObj2.value) { }

Answer 1

I am not sure how your validation function works, but it seems like you could add a hidden input that holds the url of the uploaded preview file OR the value in the file input. Then you could just compare the url input with the hidden input.

But it seems likely you'll just need to write a custom validation function.

Answer 2

I'm not sure I understand your question completely as it's not clear to me.

You want to check this:

if (fObj.value && fObj2.value) {}

and

if (!fObj.value && !fObj2.value) {}

So why not add this in as well...

if (fObj.value && !fObj2.value) {}

or

if (!fObj.value && fObj2.value) {}

Answer 3

What about adding a radio button next to each option, and allowing the selected radio button to determine which option is used?

Answer 4

I unfortunately I couldn't understand the actual question, but here's a sidebar tip:

The XOR operator can come in handy (though obscure) in cases like this:

if (fObj.value ^ fObj2.value) {
    // Only one value is set, we're good
} else {
    // Both of them are set or neither of them are set
}

Answer 5

I'm not sure exactly what you're trying to do here, but you could add a hidden form field, then attach a function to both the file input and the URL inputs' onchange events, that would set the hidden field to this value.

Fundamentally I'm not even sure that the approach you're currently taking is appropriate - Firefox 3, for example, doesn't let you edit the contents of a file field directly and as far as I can tell gives you no way to "unset" a value. So once a file has been chosen, the "pdf" input will always be non-null, which with the constraints you have set (as I understand them) means that the "url" input is effectively permanently disabled. This is even worse since you give the file input an initial value so that it will never ever be null/empty string.

You may need to take a step back and think about exactly what you're trying to acheive and whether an alternative technique might be better. For example, a radio button to select between the file upload box or a URL resource, which disables and enables fields as appropriate.

Additionally, the fact that most people here didn't understand quite what you're asking even after an edit is an indication that there's something about it that's not too intuitive, and it implies that people who will need to maintain this code in future might go through a similar thing. Again, refactoring the design is probably in order, or perhaps jsut a bunch of descriptive comments.