Как отобразить сообщение об ошибке в виде всплывающей подсказки?

Question

Я пытаюсь отобразить сообщение об ошибке в виде всплывающей подсказки, как показано в ссылке ниже, но это не работает для меня. Пожалуйста, дайте мне знать, что это за ошибка.Ошибка, с которой я сталкиваюсь, - это сообщение об ошибке всплывающей подсказки, вместо того, чтобы показывать рядом с элементом, где-то за пределами таблицы.Ссылка на следующий:

jQuery override Отображение сообщения об ошибке проверки по умолчанию (Css) Всплывающее окно / всплывающая подсказка, как

Я отправляю свой код здесь:

<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td colspan="4">MAIN DETAILS
</td>
</tr>
<tr>
<td class="TCDetail_Title">Launch Number:
</td>
<td class="TCDetail_Item">[LaunchID]
</td>
<td class="TCDetail_Title">
</td>
<td class="TCDetail_Item">
</td>
</tr>
<tr>
<td class="TCDetail_Title">Client:
</td>
<td class="TCDetail_Item">[CustName]
</td>
<td class="TCDetail_Title">Job Number:
</td>
<td class="TCDetail_Item">[JobID]-[DashID]
</td>
</tr>
<tr>
<td class="TCDetail_Title">Supplier:
</td>
<td class="TCDetail_Item">[SuppName]
</td>
<td class="TCDetail_Title">Supplier Code:
</td>
<td class="TCDetail_Item">[SupplierID]
</td>
</tr>
<tr>
<td class="TCDetail_Title">Service Date:
</td>
<td class="TCDetail_Item"><input type="text" class="clr" size="8" name="frmServiceDate" id="frmServiceDate" value="[DateScheduled]" class="Sdate">
</td>
<td class="TCDetail_Title">Activity:
</td>
<td class="TCDetail_Item">
<select name="frmActivityType" id="frmActivityType">
<option value='' selected=''>PleaseSelect..</option>
<option value='1'>Inspect</option>
<option value='2'>Audit</option>
</select>
</td>
</tr>
<tr>
        <td colspan="4">
            <div class="buttons">
                <button onclick="checkall();">Submit Timecard</button>
                <button>Cancel</button>
            </div>
        </td>
</tr>
</table>

Сценарий Jquery:

<script type="text/javascript">
$.validator.addMethod(
"Sdate",
function (value, element) {

var nowdate=new Date();
if(Date.parse(value) < Date.parse(nowdate))
return (Date.parse(value));

},
"Service Date should not be greater than todays Date."
);
$(document).ready(function(){

$("#Form").validate({
rules:
{
frmActivityType : "required",
frmServiceDate :
{
required: true,
date: true,
Sdate:true
}
},
errorElement: "div",
wrapper: "div", // a wrapper around the error message
errorPlacement: function(error, element) {
offset = element.offset();
error.insertAfter(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top);
}
});
});
</script>

и блок стилей CSS:

<style>
div.message{
background: transparent url(msg_arrow.gif) no-repeat scroll left center;
padding-left: 7px;
}

div.error{
background-color:#F3E6E6;
border-color: #924949;
border-style: solid solid solid none;
border-width: 2px;
padding: 5px;
}
</style>

Заранее спасибо, Шраванти

Answer 1

Вы можете использовать JQuery UI Postion API для позиционирования сообщения об ошибке рядом с элементом,

Ссылка на JQuery UI Position API

Надеюсь, это поможет.