SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    LiveValidation only validate fields that are visible?

    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. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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")
    Last edited by Gar onn; Jun 14, 2011 at 13:23. Reason: more info

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gryphon61 View Post
    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).
    I'm doing something similar. I found and recommend this code (http://www.onextrapixel.com/2009/10/...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.

    Quote Originally Posted by gryphon61 View Post
    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>
    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

    Quote Originally Posted by gryphon61 View Post
    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!
    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
    Last edited by aescrc; Apr 11, 2013 at 11:30. Reason: to provide further assistance if necessary


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •