Question

I am using a fantastic jQuery validation plugin. It is working well with a single form, but if I use divs into this form, it does not work (at least it works only for the first div).

I would like a three-column layout form (left, center & right div columns). Validations works well only in left (first) column. If I join all columns, it works again perfectly. It stops working after the first closing div… I would like to validate when the click submit button is clicked.

<script type="text/javascript">
    $(document).ready(function() {
        // Validate signup form on keyup and submit
        var validator = $("#form").validate({
            rules: {
                name: {required: true,},
                age:  {required: true,},
                city: {required: true,}
            },
            messages: {
                name: {required: "required"},
                age:  {required: "required"},
                city: {required: "required"}
            },
        });
    });
</script>

<div class="left">
    <form id="form" class="form" action="REGISTER.PRO" method="post">
        <input id="name" name="name" value="" type="text" class="name"/>
        </div>
        <div class="center">
            <input id="age" name="age" value="" type="text" class="age"/>
        </div>
        <div class="right">
            <input id="city" name="city" value="" type="text" class="city"/>
            <button>Register</button>
    </form>
</div>

How can I do this?

Answer 1

You have invalid markup (wrongly nested divs) and invalid JavaScript code (trailing commas). Here’s how to fix it:

<form id="form">
    <div class="left">
        <input id="name" name="name" value="" type="text" class="name"/>
    </div>
    <div class="center">
        <input id="age" name="age" value="" type="text" class="age"/>
    </div>
    <div class="right">
        <input id="city" name="city" value="" type="text" class="city"/>
    </div>
    <button>Register</button>
</form>

And JavaScript code:

$("#form").validate({
    rules: {
        name: {
            required: true
        },
        age: {
            required: true
        },
        city: {
            required: true
        }
    },
    messages: {
        name: {
            required: "required"
        },
        age: {
            required: "required"
        },
        city: {
            required: "required"
        }
    }
});

And a live demo.