JQuery Validation Engine for dynamically added hidden input fields

Dukeatcoding picture Dukeatcoding · Feb 20, 2013 · Viewed 7.2k times · Source

I want to use the JQuery Validation Engine plugin to look over dynamically added hidden input fields.

At least one of this fields has to be there, when the form is submitted.

It tried to achieve this with the groupRequired Validator

http://posabsolute.github.com/jQuery-Validation-Engine/#validators/grouprequired

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
                     <script>
                    $(document).ready(function(){
                        $("#tagform").validationEngine();
                       });
                    </script>
        <form id="tagform">
               <input type="hidden" name="tags" id="tags-input" />
                    <input type="hidden" name="inc" value="locate">
                    <input type="hidden" class="validate[groupRequired[tagitem]]" name="validation">
                    <br><br>
                    <input type="submit" value="Save Tags">

        </form>

Added Fields look like:

 var formhtml ='<input type="hidden" name="tags[]" class="validate[groupRequired[tagitem]]" id="id'+itemid+'" parenttag="'+parent+'" value="'+itemid+'">';
                $("#tagform").append(formhtml);

At the moment it simply doesn't check for the hidden fields.

Any idea how to fix this or another approach ?

Workaround

Use a simple javaskript onSubmit Function to check occurens of tags

function checkForm(form)
{
var count = $('input[name="tags[]"]').length;
if(count == 0 ) {
   alert("Select at least one tag");       
   return false;
}
alert ("Count " + count)
return true;
}

Still would love to use Jquery Validation Engine

Answer

Dukeatcoding picture Dukeatcoding · Aug 26, 2013

Instantiate JQuery Validation with validateNonVisibleFields

   <script>
    $(document).ready(function(){
        $("#formID").validationEngine({validateNonVisibleFields: true,
        updatePromptsPosition:true});

       });
    </script>

Still you have the problem that Jquery / Javascript can not get a position of a hidden field. So use style visibility:hidden instead.

<input name="hiddenq2" type="text" value="" class="validate[required]" jqtop="500" id="form-validation-field-1" style="visibility: hidden">

You still might have to adjust a little bit with the promptPosition options but at least there is something showing up.