jQuery Validate Plugin - validating with class on parent container

JavaScript
1

Hi,
I’ve used the jQuery validation plugin (http://jqueryvalidation.org/) by either adding a “required” class on the field or by writing out specific fields in the validate function.

I have a new challenge that I don’t know how to solve. Due to third party systems, the "required"class is being added in the parent

  • example:

    <li class="required"><input type="text" id="x" name="x"></li>

    So how do I validate fields that have a parent class of required?

    • 2

    I’ve never used jqueryvalidation, but what you could do is scan for any non-form field that has “.required” and apply the class to all children elements through jQuery. So before doing the .validate() method, add this:

    $('.required')
    .not('input, textarea')
    .children()
        .addClass('required')
    3

    Hi labofoz, so I copied and pasted your snippet in the <head> of my doc, as I have the validate script at the bottom of the page but it does not add a required class on the input. Any ideas why?

    <script>
     $('.required')
     .not('input, textarea')
     .children()
     .addClass('required')
</script>

    Additionally, all my form fields will be within an < li> so we could scan for:

    $('li.required')
    4

    Oh ok, try the following:

     $('li.required').find('input, textarea').addClass('required')

    This finds any input or textarea within li.required and adds “required” to it. The one I posted before only checks immediate children which might not work in all cases. If it doesn’t work would you mind posting a link?

    5

    This is what I am using as a quick test.:

    <script>
      $('li.required').find('input, textarea').addClass('required')
</script>
<ol>
     <li class="required">
           <input type="text" class="xyz" value="Hola!">
     </li>
</ol>

    Here is a link to the stripped down version of the page as it has some information that should not be live yet. Basically I stripped out content and kept the form to one field as it should be a quick test.
    http://conradabraham.com/clients/me/validation/
    Thanks for your help!

    6

    What if you flipped it:

    <ol>
     <li class="required">
           <input type="text" class="xyz" value="Hola!">
     </li>
</ol>
<script>
      $('li.required').find('input, textarea').addClass('required')
</script>

    I added that script through the console and it worked fine. Make sure the scripts are loaded at the bottom of the page, or at least after the list items. If that’s not possible, try wrapping the script like this:

    // Wait until the entire page is loaded
jQuery(function($){
    $('li.required').find('input, textarea').addClass('required')		
})
    7

    Dude! That did it. Thanks for the help! Appreciate it!

    8

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.