Jquery form validation custom error placement in <div> container

Question

I am using jquery validate plugin to validate my form fields.

The script is like below

jQuery(document).ready(function($){
     $.validator.addMethod(
    "mydate",
    function(value, element) {
        return value.match(/^\d\d?\-\d\d?\-\d\d\d\d$/);
    },
    "Please enter a date in the format dd-mm-yyyy"
    );
    var validator = $("#signupform").validate({
  rules: {
            User: {
    required: true,
                remote: {
        url: "user.php",
        type: "post",
          },
   },
   "RID[]": {
    required: true,
                remote: {
        url: "resource.php",
        type: "post",
          },
   },
            Date: {
    required: true,
                mydate : true
            },
  },
  messages: {
   User: "Specify Active User",
   "RID[]": "Specify Available Resource",
            Date: "Specify Date"
  },
  errorPlacement: function(error, element) {
    error.appendTo( element.parent().next() );
  },
  success: function(label) {
   label.html("OK").addClass("checked");
  }
 });

which validates one of my form field

<tr>
<td style="width: 70px" class="style22" valign="top">Resource ID</td>
<td id="resource" style="width: 267px;">
<input id="resource" name="RID[]" type="text" value="" style="width: 232px" /></td>
<td class="style21" style="width: 160px" valign="top">
<img id="addScnt" alt="[+]" src="+.gif"/>
</td>
<td>
    &nbsp;
</td>
</tr>

But I want to place error for "RID[]" in a specific div <div id="errorcontainer2">.

How can I make this possible??

Thanks in advance.. :)

blasteralfred

Alfred · Accepted Answer · 2011-03-20 15:49:51Z

8

I solved it using custom error placement in a specific div <div id="errorbox">

errorPlacement: function(error, element){
    if(element.attr("name") == "RID[]"){
        error.appendTo($('#errorbox'));
    }else{
        error.appendTo( element.parent().next() );
    }
}

answered Mar 20, 2011 at 15:49

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nrobey · Accepted Answer · 2011-01-23 18:09:19Z

0

Create a div with an id.
use a selector to grab your error div.
use the .add() function to add your error HTML to it.

answered Jan 23, 2011 at 18:09

nrobey

7154 silver badges12 bronze badges

Comments

Irvin Dominin · Accepted Answer · 2014-12-29 15:38:16Z

0

Use the following structure and logic in errorPlacement option of validator to code:

errorPlacement: function(error, element){
    if("RID[]" == element.attr("name")){
        // Place error for RID[] as you want
    }else{
        // Place errors normally
    }
}

edited Dec 29, 2014 at 15:38

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

answered Feb 19, 2011 at 20:06

hkansal

2215 silver badges17 bronze badges

1 Comment

Alfred Over a year ago

where should i add <div id="errorcontainer2"> in ur syntax??

Collectives™ on Stack Overflow

Jquery form validation custom error placement in <div> container

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related