multiple custom error message support per field by using parsley.js
HTML
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- parsley -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cemail">E-Mail with custom method (required)</label>
<input id="cemail" name="checkEmail" type="text" data-parsley-checkEmail="" required />
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
CSS
input.parsley-success, select.parsley-success, textarea.parsley-success {
color: #468847;
background-color: #DFF0D8;
border: 1px solid #D6E9C6;
}
input.parsley-error, select.parsley-error, textarea.parsley-error {
color: #B94A48;
background-color: #F2DEDE;
border: 1px solid #EED3D7;
}
JavaScript
jQuery(document).ready(function () {
//$("#commentForm").parsley();
$("#commentForm").parsley();
// when there is an error, display the tooltip with the error message
$.listen('parsley:field:error', function (fieldInstance) {
console.log("error: %o", fieldInstance);
var arrErrorMsg = ParsleyUI.getErrorsMessages(fieldInstance);
errorMsg = arrErrorMsg.join(';');
fieldInstance.$element
.popover('destroy')
.popover({
container: 'body',
placement: 'top',
content: errorMsg
})
.popover('show');
return false;
});
// destroy tooltip when field is valid
$.listen('parsley:field:success', function (fieldInstance) {
fieldInstance.$element.popover('destroy');
});
window.ParsleyValidator
.addValidator('checkEmail', function (value, requirement) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(value);
}, 32)
.addMessage('en', 'checkEmail', 'Please specify a super valid email')
//$('button[type="submit"]').click(function(e){ e.preventDefault(); });
});