Validate - Error Placement
http://stackoverflow.com/questions/10723462/jquery-form-validation-define-container-for-errors
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form id="form">
<div id="mynewID">Error up here
</div>
<br/>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<span id="errorname" class="error"></span>
</li>
<li>
<label for="firstname">First Name: </label>
<input id="firstname" type="text" name="firstname" />
<span id="errorfirstname" class="error"></span>
</li>
</ul>
<input type="submit" />
</form>
CSS
.error { color: red; }
JavaScript
$(document).ready(function() {
$("#form").validate({
rules: {
name: {
required: true
},
firstname: {
required: true
}
},
messages: {
name: {
required: "Enter name"
},
firstname: {
required: "Enter firstname"
}
},
errorPlacement: function (error, $element) {
var input__id = $element.prop( 'id' );
$( "#mynewID" ).append( error );
// $error.insertAfter( $element.parent() );
}
// errorPlacement: function( error, element ) {
// errorText = error.text();
// element.parent().siblings( '.your-help-label' ).text( errorText );
// }
});
});