adding validation rule(s) to dynamically added elements

Question

I want to validate elements in a form that is created dynammically. However, the code for adding rules ('$("#email"+index).rules("add", { required:true,email:true });') in the code below does not seem to work (e.g., no response).

What am I doing wrong? (for this adding-rule code I used the page view-source:http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm as an example, which does work. Also added .validate() at the start of the document.ready function, e.g. before adding the rule as suggested in jQuery - How to dynamically add a validation rule , but that does not work either...)

Please your suggestions...

Code (with simplified form):

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" ></script>   
    <script type="text/javascript" src="/jquery/jquery.validate.js"></script>
    <script type="text/javascript" src="js/additional-methods-v2.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var wrapper = $("#wrapper");
            var addForm = $("#add-form");
            var index = 0;

            $("#myForm").validate();

            var getForm = function(index, action) { //returns set of form fields as a string
            return $('\
                <table>\
                <tr>\
                <td> Name </td> <td> Email </td> <td> Phone </td>\
                </tr>\
                <tr>\
                <td> <input id="name' + index + '" name="name' + index + '" /></td>\
                <td><input id="email' + index + '" name="email' + index + '" /></td>\
                <td><input id="phone' + index + '" name="phone' + index + '" /></td>\
                <input type="submit" value="Save">\
                </tr>\
                </table>\
                <a href="#" class="remove">remove form</a>\
                ');
            }//getForm()

            addForm.on("click", function() {
                var form = getForm(++index)
                form.find(".remove").on("click", function() {
                    $(this).parent().remove();
                }); //form.find()
                $("#wrapper").append(form);
                $("#email"+index).rules("add", { required:true,email:true });
            }); //addForm.on()


            $("#myForm").validate({
     //console.log("validate");

                errorPlacement: function(error, element) {
           error.insertAfter(element);
                   },
                rules: {
                        email: {
            required: true

        }
                } //rules

    }); //validate()

        }); //$(document).ready
    </script>


</head>
<body>
    <form id="myForm" name="myForm" action="" method="post" autocomplete="on">
        <div id="wrapper"></div>
        <a href="#" id="add-form">add form</a>
    </form>

</body>
</html>

This has been asked before http://stackoverflow.com/questions/3033910/jquery-how-to-dynamically-add-a-validation-rule — Sergiu Paraschiv, Aug 30 '13 at 14:11
correct, I referred to that link as well and indicated that putting .validate() before adding the rule does not seem to work; I added '$("#myForm").validate();' just before the line '$("#email"+index).rules("add", { required:true,email:true });' and also tried by putting the validate line at the start of the documenten ready function. I could also ask: where precisely in the code to put the $("#myForm").validate() line (if that would be the error)? — Joppo, Aug 30 '13 at 14:29

Sparky · Accepted Answer · 2013-08-30T14:57:18.537

0

You are calling $("#myForm").validate() twice. Once without options and subsequently with options. You can only call it once (initialization) and all subsequent calls are ignored.

So simply remove the second one and place all the options into the first one.

$(document).ready(function(){
        var wrapper = $("#wrapper");
        var addForm = $("#add-form");
        var index = 0;

        $("#myForm").validate({
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },
            rules: {
                email: { // <-- does this input exist on DOM ready?
                    required: true
                }
            } //rules
         }); //validate()

        ....

However, the rules declaration would be invalid if the input with name="email" does not exist yet. Since it seems like your form is starting out with zero input elements, you would need to remove the rules declaration...

$("#myForm").validate({
    errorPlacement: function(error, element) {
        error.insertAfter(element);
    }
}); //validate()

edited Aug 30 '13 at 14:57

answered Aug 30 '13 at 14:41

Sparky

98,165
25
199
285

thnx (!) that works. (though I still dont understand why the mentioned example http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm does work as that code calls validate() after adding the rule...) – Joppo Aug 30 '13 at 15:15
@user2543182, in your linked example, `.validate()` is called after the `click` handler function, **not** after "adding the rule". Remember that the rule is added only when you click the button, which is long after `.validate()` is fired on DOM ready. You should be able to do the same, however, you may also have been dealing with other issues simultaneously. – Sparky Aug 30 '13 at 15:32
@user2543182, it's important to keep straight what gets called when the page loads (`.validate()` is the initialization) versus what gets called when events occur. The `.validate()` method is never called again after the page loads. – Sparky Aug 30 '13 at 15:33

adding validation rule(s) to dynamically added elements

1 Answers1