Multiple form dynamic field javascript validation

Question

I have multiple form like this:

<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit)
    <form>
        <input name="<?php echo $i; ?>venue" type="text">
        <input name="roster" type="text">
        <input type="submit" name="btn_venue">

    </form>
<?php } ?>
    <form>
        <input name="hospitality" type="text">
        <input name="template" type="text">
        <input type="submit" name="btn_hospitality">
    </form>
    ...
    ...
    <form>
        <input name="element" type="text">
        <input name="alignment" type="text">
        <input type="submit" name="btn_xyz">
    </form>

I want validate(field should not be blank) in all form so, how can I use validation ?

I tried jQuery validation:

<script>
    $('document').ready(function () {
        $('form').each(function (key, form) {
            $(form).validate({
                rules: {
                    hospitality: {
                        required: true
                    },
                    //...
                    //...
                    alignment: {
                        required: true
                    }
            });
        });
    });
</script>

I have manage static name field validation but I don't idea about dynamic venue name validation.Can anyone help me ?

if only one form the easily maintain but dynamically multiple form submit validate how to validate.

at a time only one form submit but particular form field validate how it is possible?

Answer 1

Try this. It goes through each form and for each of them through each input (of type text) and builds a required rule for each of them. Then feeds the dynamically built rules to the validate function.

$('document').ready(function () {
    $('form').each(function (key, form) {
        // build the rules object dynamically
        var rules = {};
        // loop through each input in the form
        $(form).find('input[type="text"]').each(function(idx, obj) {
            // make a rule for this input
            rules[obj.name] = {"required": true};
        });
        $(form).validate({
            "rules": rules
        });
    });
});

Answer 2

Okey this is not for sure the cleanest way to do this but its the first that cross my mind. First, edit your html, so form has id="form$i", input has id="input$i", and submit has id="$i". Also add class to submit class="validate"

<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit)
    <form id="form<?php echo $i; ?>">//so id="form2" for example
        <input id="input<?php echo $i; ?>" name="<?php echo i; ?>venue" type="text">// id="input2"
        <input name="roster" type="text">
        <input id="<?php echo $i; ?>" class="validate" type="submit" name="btn_venue">//id="2"
    </form>
<?php } ?>

JQuery which should work, I'll explain each line in code

<script>
    $(function () {
        $(".validate").click(function () { //this is call for each click button with class validate
            var id = $(this).attr('id');//getting id of the clicked element which is $i
            var formid = 'form' + id;//creating new var formid which will target formid (for example: in first loop $i=1, so id=1, and formid=form1)
            var input = 'input' + id;//creating input which value will be input$i
            $('#' + formid).on('submit', function (e) {//on form submit validate function
                if ($(#input).value == '') {
                    return false;
                } else {
                    return true;
                }
            });
        });
    });
</script>

hope you understand logic, it might be I made mistake somewhere so take a close look..