JQuery Textarea-проверка не работает

Question

Я хотел бы проверить форму с текстовой области. Все идет нормально. Но когда я пытаюсь инициализировать текстовое поле с помощью плагина jQuery validate, ничего не происходит. Всплывающая подсказка не отображается. Я использую tooltipster вместе с плагином jQuery-validate.

В консоли нет ошибок JavaScript.

Это форма:

<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>

JavaScript-код:

$(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) {

}
});

Answer 1

Вы назначили required Правило для the_report но твой textarea содержит name="report",

Вы можете использовать только name в пределах rules объект.

rules: {
    report: { //  <- MUST match the NAME, not the ID
        required: true
    }
},

Вы никогда не указывали, какая версия ToolTipster, но вот рабочая демонстрация jsFiddle с использованием v4.0

СПРАВКА: Правильная интеграция jQuery Validate для ToolTipster версий 2, 3 и 4.