Question

I am trying to display an error message as a tooltip as shown in the link below but that doesn’t work for me.Please let me know what would the error be.
The error i am facing is the tooltip error message instead of showing beside the element it shows up some where outside the table.
Link i follwed:

jQuery override default validation error message display (Css) Popup/Tooltip like

I am posting my code here:

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

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

and the CSS style block:

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

Thanks in Advance,
Sravanthi

Answer 1

You can use JQuery UI Postion API to position the error message next to element,

Link to JQuery UI Position API

Hope it helps.