CODEWITHSUNDEEP
jqueryvalidation
Bibek Sharma
Bibek Sharma

Reputation: 83

validating dynamically added fields

When the add button is clicked a new input is dynamically added. However when the form is submitted only the first input field is validated. How can i validate dynamically added inputs?

Below are my codes:

<body>
    <section class="container">
        <div class="majors">
            <h1>Department</h1>
        </div>
        <form class="hform" id="selectForm" action="/action_page.php">
            <select name="Department">
                <option value="Sociology" selected>Sociology</option>
                <option value="Science">Science</option>
                <option value="Humanities">Humanities</option>
                <option value="Linguistics">Linguistics</option>
            </select>

            <div class="sbutton">
                <input type="button" id="submit_form" value="submit" />
            </div>
            <button class="delete" type="button" value="delete">Delete</button>
        </form>
    </section>

    <section class="container">
        <form class="cmxform" id="commentForm" method="get" action="form-handler.html" autocomplete="">
            <fieldset>
                <div class="form-copy-wrap">
                    <input class="checkbox" type="checkbox" />
                    <p>
                        <label for="aname">Name</label>
                        <input name="name[]" minlength="5" type="text" required/>
                    </p>
                    <p>
                        <label for="aemail">Email</label>
                        <input name="email[]" type="email" required/>
                    </p>
                    <p>
                        <label for="aage">Age</label>
                        <input name="age[]" type="number" required/>
                    </p>
                </div>
                <div class="input_fields_wrap">
                    <div class="addButton">
                        <button type="button" value="add">Add</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </section>
    <script>
        $("#submit_form").on('click', function (e) {
            e.preventDefault();
            $("form#commentForm").submit();
            $(".form-copy-wrap").submit();
        });
        $("form#commentForm").validate({
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true,
                }
            },
            messages: {
                name: "Please specify your name",
                email: {
                    required: "We need your email address to contact you",
                    email: "Your email address must be in the format of [email protected]"

                }
            }
        });
    </script>

    <script>
        $(document).ready(function () {
            var max_fields = 10;
            var counter = 0;

            $('.addButton').on('click', function () {
                counter++;
                if (counter >= max_fields) {
                    console.log('You have reached a max limit fields')
                    return;
                }
                var copy = $('.form-copy-wrap').first().clone();

                $("#commentForm fieldset").append(copy);
            });

            $('.delete').on('click', function () {
                $('input:checkbox').each(function () {
                    if ($(this).is(':checked')) {
                        $(this).closest('.form-copy-wrap').remove();

                    }
                });
            });
        });
    </script>
</body>

Upvotes: 2

Views: 4792

Answers (2)

jignesh patel
jignesh patel

Reputation: 982

Please replace click event with this one

 $('.addButton').on('click', function () {
    counter++;
    if (counter >= max_fields) {
       console.log('You have reached a max limit fields')
       return;
    }
    var copy = $('.form-copy-wrap').first().clone();

    $("#commentForm fieldset").append(copy);

    var form = $("#commentForm");
    form.removeData('validator');
    form.removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(document);
});

Upvotes: 2

hasan
hasan

Reputation: 3502

You can validate your form before form submission and implement validation for dynamically added input. Add rules for each ot them with jquery $.each and implement validation like following.

$(document).ready(function() {          
        var inputCount = 1; // used to increment the name for the inputs

        function addInput() {
            $('.form-copy-wrap').append($('<p>New Input: <input class="required" name="name'+inputCount+'" /></p>'));
            inputCount++;
        }

        $('form.commentForm').on('submit', function(event) {
            // adding rules for inputs with class 'required'
            $('#inputs input.required').each(function() {
                $(this).rules("add", 
                    {
                        required: true
                    })
            });            

            // test if form is valid 
            if($('form.commentForm').validate().form()) {
                console.log("valid");
            } else {
                // prevent default submit action
                event.preventDefault();
                console.log("not valid");
            }
        })

        // set handler for addInput button click
        $("#addInput").on('click', addInput);

        // initialize the validator
        $('form.commentForm').validate();

   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form class="commentForm" method="get" action="" style="float:left">
    <div>
         <div class="form-copy-wrap">
            <input class="checkbox" type="checkbox" />
            <p>
                <label for="aname">Name</label>
                <input name="name[]" minlength="5" type="text" required/>
            </p>
            <p>
                <label for="aemail">Email</label>
                <input name="email[]" type="email" required/>
            </p>
            <p>
                <label for="aage">Age</label>
                <input name="age[]" type="number" required/>
            </p>
         </div>

        <input class="submit" type="submit" value="Submit" />
        <input type="button" value="add" id="addInput" />

    </div>
</form>

Upvotes: 1

Related Questions