Jquery Validation and error placement

I am using jquery Validation Plugin, am using in the project, the validation works great, but seems issue when i have to display the error, it displays the error at the top of the page, if i use prepend or at the bottom of the page, if i use append, i want the error to show inside the tr td element so it looks good, but i am unable to figure out a way, any guidance, please

Thanks

jQuery(document).ready(function(){
    // VALIDATION
    // validate forms that have class="validate"
    jQuery('form.validate').each(function(){
    var alertID = jQuery(this).attr('id');
    jQuery(this).prepend('<div class="alertBox alertText validationAlert" style="display:none;"></div><div class="clear"></div>');
    });
    // handle select box changes
    jQuery('form.validate select').change(function(){
        jQuery(this).blur();
    });
    // set default options for validation
    jQuery.validator.setDefaults({
        focusInvalid:true,
        onkeyup:false,
        onblur:true,
        errorClass:"warning",
        errorElement:"span",
        errorPlacement: function(error, element) {
            // give the sibling label the warning class
            // insert error markup above the label
            jQuery(element).siblings('label').addClass('warning')
            // uncomment next line to show error messages above each field
            //.before(error)
            ;
           },
         showErrors: function(errorMap, errorList) {
            // target the current form with this.currentForm
            //jQuery(this.currentForm).hide();
            if (this.numberOfInvalids() > 0){
                // dynamic message depending on form ID
                var formID = jQuery(this.currentForm).attr('id');
                if (formID == 'formCustomer'){
                    var validationMessage = 'Complete all required information';
                } else {
                    var validationMessage = 'Complete your selection above';
                };
                // only show validation message if text is provided
                    if (!(validationMessage == '')){
                        jQuery(this.currentForm).children('.validationAlert:first').show().html(validationMessage);
                    };
                    // show the errors
                        this.defaultShowErrors();
                    // if everything is ok, reset the validation
                    } else {
                        //alert('Selection OK!');
                        jQuery(this.currentForm).children('div.validationAlert').empty().hide();
                        jQuery(this.currentForm).children('span.warning').remove();
                        jQuery(this.currentForm).children('.warning').removeClass('warning');
                    }
            }
        // end showErrors
        });
    jQuery('form.validate').each(function(){
        jQuery(this).validate();
    });
    // end form validation
});

Open in new window


relevant HTML code where i want to show the error
<form class="validate" id="formCustomer" name="formCustomer" method="post" action="handler.php?mode=signupnews">
    <table width="98%" border="0" align="center" cellpadding="1" cellspacing="2" style="margin:10px;">
      <tr>
        <td align="center"><h2 class="jspDrag"><strong>Newsletter Signup</strong></h2></td>
      </tr>
      <tr><td><div class="showErrorMethods"></div></td></tr> <!-- wanna show here -->
      <tr>
        <td><label for="urfname">Firstname:</label></td>
      </tr>
      <tr>
        <td>
            <input type="text" name="urfname" id="urfname" value="" class="{required:true}" title="First Name is required" Placeholder="First Name is required"/>
          </td>
      </tr>
      <tr>
        <td><label for="urlname">Lastname:</label></td>
      </tr>
      <tr>
        <td>
            <input type="text" name="urlname" id="urlname" value="" class="{required:true}" title="Last Name is required" placeholder="Last Name is required"/>
          </td>
      </tr>
      <tr>
        <td><label for="uremailaddr">Email Address:</label></td>
      </tr>
  <tr><td><input stype="submit" value="submit" name="submit"></td></tr>
</table>
</form>

Open in new window


jsFiddle

jsfiddle.net/XDn4k/1
LVL 16
Gurpreet Singh RandhawaCEOAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
You do this

   jQuery(this).prepend('<div class="alertBox alertText validationAlert" style="display:none;"></div><div class="clear"></div>');
   

so it prepends the div to the form

If you delete that line and do

<form class="validate" id="formCustomer" name="formCustomer" method="post" action="handler.php?mode=signupnews">
    <table width="98%" border="0" align="center" cellpadding="1" cellspacing="2" style="margin:10px;">
   <tr>
        <td align="center"><h2 class="jspDrag"><strong>Newsletter Signup</strong></h2></td>
      </tr>
 
     <tr>
        <td align="center" class="alertBox alertText validationAlert"></td>
      </tr>

 

You should get your messages inside the table - Please note that it is not recommended to use tables for rendering non-tabular data
0
Kyle HamiltonData ScientistCommented:
you should use the provided error placement function that comes with the plugin:

errorPlacement: function(error, element) {
            // insert error inside field:
            jQuery(element).val(error);
           },
0
Michel PlungjanIT ExpertCommented:
Why should he put an error message inside an input field when he wants to show it in an html container and hide the container when no error?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Kyle HamiltonData ScientistCommented:
sorry, I misunderstood. i thought that's what he wanted.

You should still use the errorPlacement function though.


errorPlacement: function(error, element) {
            // insert error inside desired element:
            jQuery(".showErrorMethods").text(error);
           },

Open in new window

0
Michel PlungjanIT ExpertCommented:
Why? He has written his own showerror function. That is completely acceptable
0
Kyle HamiltonData ScientistCommented:
why?

because it's an unnecessary duplication of code.
0
Michel PlungjanIT ExpertCommented:
Only if the current errorplacement functionality satisfy his requirements.
0
Gurpreet Singh RandhawaCEOAuthor Commented:
Guys,

I already have eror placement, it is not happening:

jQuery.validator.setDefaults({
		focusInvalid:true,
		onkeyup:false,
		onblur:true,
		errorClass:"warning",
		errorElement:"span",
		errorPlacement: function(error, element) {
			// give the sibling label the warning class
			// insert error markup above the label
			jQuery(element).siblings('label').addClass('warning')
			// uncomment next line to show error messages above each field
			//.before(error)
			;
		   },

Open in new window

0
Gurpreet Singh RandhawaCEOAuthor Commented:
@mplungjan - Your code does not seems to work, it is showing me nothing in the TD and tr
0
Kyle HamiltonData ScientistCommented:
@myselfrandhawa,

the reason the error placement isn't happening in the above function, is because it is commented out. It still won't work as it is though, because the labels are not siblings of the inputs, which is what the code is looking for.

What I posted above will show the error in the element you asked for. If you want to show different messages for different forms, you can use the built in messages object. Each form, and each filed for that matter, can have unique messages.
0
Gurpreet Singh RandhawaCEOAuthor Commented:
understood, i used ur code and it did not worked
0
Kyle HamiltonData ScientistCommented:
please post a link to your page. there may be other issues causing your validation not to work.
0
Gurpreet Singh RandhawaCEOAuthor Commented:
http://goo.gl/kl6sP0

click the bottom to open newsletter fancybox and see the issue
0
Kyle HamiltonData ScientistCommented:
here's the only change you need to make to work with your current code:

if (!(validationMessage == '')){
		jQuery(this.currentForm).find('.showErrorMethods').show().html(validationMessage);
};

Open in new window


You will need to style your message however you want of course, right now it's just grey like everything else.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Gurpreet Singh RandhawaCEOAuthor Commented:
thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.