I am using a fantastic jQuery validation plugin. It is working well with a single form, but if I use div
s 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>
<开发者_JAVA百科div class="right">
<input id="city" name="city" value="" type="text" class="city"/>
<button>Register</button>
</form>
</div>
How can I do this?
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.
精彩评论