2

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

Community
  • 1
  • 1
Sravanthi
  • 121
  • 3
  • 11
  • Does this fiddle have the same problem? http://jsfiddle.net/Vakp2/ – Andrew Whitaker Dec 28 '11 at 21:08
  • hey andrew,That is what I copied your code and used in my browser but it is not showing up the error message beside the element – Sravanthi Dec 28 '11 at 21:38
  • I noticed your validation script uses a `
    `, but your markup as provided doesn't contain a `form` element. Is that just a typo?     – Andrew Whitaker Dec 28 '11 at 21:39
  • @andrew,As i am using it in dotnet nuke so the html already provides me the form with id Form that is the reason i need not put the form element in my code.any ways when i changed the offset value in the error placement function it is working.thanks for the help – Sravanthi Dec 29 '11 at 14:06

1 Answers1

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.

Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
  • hey thanks for that that worked for me i changed the offset in my code like this it started working.:errorElement: "div", wrapper: "div", // a wrapper around the error message errorPlacement: function(error, element) { offset ="292 382"; 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); } – Sravanthi Dec 28 '11 at 22:39