Validate JQTE
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://chadkuehn.com/references/jqte/jquery-te-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://chadkuehn.com/references/jqte/jquery-te-1.4.0.css">
<input type="button" id="btn" value="Show form" />
<br />
<br />
<br />
<form id="frmMain" style="display:none;">
<div>
<label for="txtName">*Full Name:</label>
</div>
<div>
<input type="text" name="name" id="txtName" class="required" />
</div>
<br />
<div>
<label for="txtMaiden">Maiden Name:</label>
</div>
<div>
<input type="text" name="maiden" id="txtMaiden" />
</div>
<br />
<div>
<label for="txtMessage">*Message:</label>
</div>
<textarea name="message" id="txtMessage" class="required"></textarea>
<br />
<input type="button" value="Submit" id="btnSubmit" />
</form>
CSS
input.maskError {
border: 1px solid #cc0000;
background: #f3d8d8 url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/blitzer/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png) 50% 50% repeat;
color: #2e2e2e;
}
div.maskError {
border: 1px solid #cc0000;
}
div.maskError .jqte_editor {
background: #f3d8d8 url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/blitzer/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png) 50% 50% repeat;
color: #2e2e2e;
}
label.maskError {
color: red;
font-size:11px;
font-style:italic;
display:block;
}
JavaScript
$("#btn").click(function() {
$("#frmMain").show();
});
$("#txtMessage").jqte({placeholder: "Please, write your biography"});
$.validator.setDefaults({
ignore: []
});
var refValid = $("#frmMain").validate({
errorClass: 'maskError',
errorPlacement: function (error, element) {
var el = $(element).closest(".jqte");
if (el.length == 1) {
error.insertAfter(el);
} else {
error.insertAfter(element);
}
},
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
var el = $(element).closest(".jqte");
if (el.length == 1) {
el.addClass(errorClass);
}
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
var el = $(element).closest(".jqte");
if (el.length == 1) {
el.removeClass(errorClass);
}
},
onkeyup: false
});
//if you leave the jqte then revalidate.
//I check to see if the form has been submitted already. If you like onkeyup
//then you may wish to remove that check.
$("#txtMessage").closest(".jqte").find(".jqte_editor").blur(function () {
if (!$.isEmptyObject(refValid.submitted)) {
refValid.form();
}
});
$(document).on("click", "#btnSubmit", function () {
if (refValid.form()) {
alert("Passed Validation!");
}
//$("#frmMain").submit();
});