LiveValidation only validate fields that are visible?

JavaScript
1

Hi, I haven’t been able to find anybody else with this same problem, so here goes…

I’m using LiveValidation to validate fields in a form before they are submitted. I have one option where the user can select “Married” “Engaged” “Living Together” or “Single”… based on what they select, it will show/hide different text input fields (Spouse Name, Fiance Name, Companion Name).

My problem is that even when these fields are hidden (using display=‘none’), LiveValidation still won’t let the form submit if these fields are blank.

Does anyone know of a way I can have LiveValidation check to see if these fields are visible or hidden, and decide whether or not to let the form submit? Is there a Custom LiveValidation parameter or something?

Any help would be very much appreciated! Thanks!

-Ryan

2

The docs say it has a function for disableing fieldchecking :
LiveValidation - Documentation

disable (function)

A helper to disable a field, so that validations are not run on it, and its value will not be posted if part of a form. It will also remove any previous validation message and field class.
This is useful for forms which can have different fields filled in depending upon choices they are given.

Returns:
The LiveValidation object itself so that calls can be chained

Example:


var myField = new LiveValidation('myField');
// disable the field - validations will not be run on this field, and its contents not submitted
myfield.disable();

also check http://livevalidation.com/documentation#ValidateCustom the custom validation (add somethgl like “|| fiieldHidden”)

3

Works perfectly! Wow, I feel pretty stupid for not having seen that in the first place, but thank you so so much for the help!

4

Hi,
I have a similar issue to this one but I’m not clear on livevalidation settings and how to interpret the above.
I have a form with a dropdown showing 1 through 10.
If user chooses 1-9, then a specific secondary paragraph field should show.
And if the user chooses 10, then a different paragraph field should show.

I figured out some javascript for showing the second form fields (likely isn’t the most elegant way to do it so suggestions welcome).
Then I used existing livevalidation code so that if the user doesn’t make a selection (dropdown choice stays on Choose One instead of 1-10), then a error will appear under the dropdown field instead of the form submitting.

Now I’d like to take it a step further and require secondary field but make the field that gets hidden not be required.
So if 1 -9 is chosen, the second field shows AND will be the only field required.
But if 10 is chosen, then its specific second field will show and be the only required field.

I tried a couple of things, but couldn’t get the form to submit b/c I think the hidden field was still being required.

Here’s my JS for determining the dropdown and showing the second field:

<script type=“text/javascript”>
function selectionChanged()
{
if(document.getElementById(“field0”).value == “blank”)
{
document.getElementById(“formElement1”).style.display=“none”;
document.getElementById(“formElement2”).style.display=“none”;
}
else if(document.getElementById(“field0”).value == “10”)
{
document.getElementById(“formElement1”).style.display=“none”;
document.getElementById(“formElement2”).style.display=“inline”;
}
else
{
document.getElementById(“formElement1”).style.display=“inline”;
document.getElementById(“formElement2”).style.display=“none”;
}

return true;

}
</script>

And here’s the code for the livevalidation to show error if dropdown choice is not made and is left on Choose One:

<script type=“text/javascript” >var field0 = new LiveValidation(‘field0’, {onlyOnSubmit: true });
field0.add( Validate.Exclusion, { within: [ ‘blank’ ], failureMessage: ‘Please make a selection’ } );</script>

Hope that makes sense and someone can help.
Thanks!

5

I’m doing something similar. I found and recommend this code (http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/) for showing and hiding fields based on yes/no (option/radio) selections. Virtually the same thing you are doing with your dropdown. I’m sure the code can be modified for a dropdown, otherwise, you could convert your dropdown to option/radio buttons.

If you go with this JQuery code, the above code is changed to (much cleaner):

$(“#formElement1”).slideDown(“fast”); //to show

or

$(“#formElement1”).slideUp(“fast”); //to hide

I used the control.js file from that functionality above to apply LiveValidation based on the yes/no selection.

I one-stepped it even further by accounting for mis-clicks. The above “.disable” function is real nice, but if the person decides to go back and choose the selection they just changed from, the field is still disabled and I haven’t found a way to re-enable it. However, back to the point, if someone accidentally chooses a selection from your dropdown, the LiveValidation becomes activated and I prefer a method to disable it without killing the field. So I used the following code in coordination with the aforementioned code to accomplish that:

$(“#MyFieldName”).val(" "); //The Validation.Presence is circumvented with just a space

Hope this helps. If you have any questions or want to see how I applied it, shoot me an email.

Rob