I'd like to validate a form with a textarea. So far so good. But when I try to initialize the textarea with the jQuery validate plugin nothing happens. The tooltip doesn't show up. I'm using tooltipster along with the jQuery-validate plugin.
In the console there are no JavaScript-errors showing up.
This is the form:
<form name="reportForm" id="reportForm" method="POST">
<div class="form_alt_design">
<label for="the_report"></label>
<textarea name="report" cols="60" rows="4" maxlength="2000" id="the_report" class="report_textbox"></textarea>
</div>
<div id="report_button_container" style="text-align:right;">
<input class="button_large2" type="submit" name="Submit" id="report_submit" value="<?php echo GAME_SUBMIT_REPORT;?>" onclick="submitReport(<?php echo $id.",'".$type;?>')" />
<input class="button_large2" type="submit" name="Submit" id="report_submit" value="<?php echo GAME_SUBMIT_REPORT;?>" onclick="" />
<input type="hidden" name="token" id="token" value="<?php echo $reportToken; ?>" />
</div>
the JavaScript-code:
$(document).ready(function() {
$('#reportForm textarea').tooltipster({
trigger: 'custom',
animation: 'fade',
animationDuration: 250,
delay: 0,
onlyOne: true,
position: 'right',
theme: ['tooltipster-noir', 'tooltipster-noir-customized']
});
// initialize validate plugin on the form
$('#reportForm').validate({
errorPlacement: function (error, element) {
var ele = $(element),
err = $(error),
msg = err.text();
if (msg != null && msg !== '') {
ele.tooltipster('content', msg);
ele.tooltipster('open');
}
}
},
success: function (label, element) {
$(element).tooltipster('hide'); },
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
},
rules: {
the_report: {
required:true
}
},
submitHandler: function (form) {
}
});
You've assigned the required
rule to the_report
but your textarea
contains name="report"
.
You can only use the name
within the rules
object.
rules: {
report: { // <- MUST match the NAME, not the ID
required: true
}
},
You never stated which version of ToolTipster, but here is a working jsFiddle demo using v4.0
REFERENCE: Proper jQuery Validate integration for ToolTipster versions 2, 3, and 4.