• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 268
  • Last Modified:

errorPlacement for one filed


Hello Experts,

Is it possible to control the placement of an error for one filed only?
Here is my code below but it does not seem to work.

lLok at this line below:

AcceptTerms: {
required:true,
errorPlacement: $("#AcceptTerms_error")
},
     

 
$('#Registration').validate({
	rules: {
		FirstName: {required:true,},
		LastName: {required:true,},
		Email: {required:true, email:true},
		AcceptTerms: {
			required:true,
			errorPlacement: $("#AcceptTerms_error")
			
			},		
	},
	
	messages: {
	FirstName: "Please enter your First Name",
    LastName: "Please enter your Last Name",
    Email: "Please enter a valid Email address",
    AcceptTerms: "Please accept our service Terms & Conditions"
	}
	
	});

Open in new window

0
Refael
Asked:
Refael
  • 6
  • 4
1 Solution
 
Kyle HamiltonData ScientistCommented:
You have to write a function to define where it should go, like:

errorPlacement: function(){

$("#AcceptTerms_error").appendTo("body");
}


Of course this just adds itt to the bottom of the page, so you have to write your function according to where you want to place your error.
0
 
RefaelAuthor Commented:

Hi kozaiwaniec

then i should replace the "body" with the "div" where the error should append to, right?
i added it at the top of script and it for some reason ignore all the validations.
can you give me a short example? and how to i attached it to this:

AcceptTerms: {required:true},      

Thanks.       
0
 
Kyle HamiltonData ScientistCommented:
Don't put it at the top of the script. Just replace your original line 8 with the new code. And yes, replace body with whatever you want to append to. I would post the whole code, but I'm on an iPad.

Hope that makes sense.
0
Ultimate Tool Kit for Technology Solution Provider

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

 
RefaelAuthor Commented:

kozaiwaniec thanks,

still does not work. the error is printed at the default location.
0
 
Kyle HamiltonData ScientistCommented:
Would you be able to post a link to your page?
0
 
RefaelAuthor Commented:

The page is not yet online (testing the form).
here below is the entire validation code:

$(document).ready(function() {

jQuery.validator.addMethod("alpha", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z]+$/);
},"Only Characters Allowed.");
	
$('#Registration').validate({
	rules: {
		FirstName: {required:true, alpha:true},
		LastName: {required:true},
		Email: {required:true, email:true},
		AcceptTerms: {required:true	},
	},	
	messages: {
	FirstName: "Please enter your First Name",
    LastName: "Please enter your Last Name",
    Email: "Please enter a valid Email address",
    AcceptTerms: "Please accept our service Terms & Conditions"
	}	
	});

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
Ok, I think this should work.

 
<script>
$(function() {

jQuery.validator.addMethod("alpha", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z]+$/);
},"Only Characters Allowed.");
        
$('#Registration').validate({
        rules: {
                FirstName: {required:true, alpha:true},
                LastName: {required:true},
                Email: {required:true, email:true},
                AcceptTerms: {
                        required:true
                        
            
                
        },      
        messages: {
            FirstName: "Please enter your First Name",
            LastName: "Please enter your Last Name",
            Email: "Please enter a valid Email address",
            AcceptTerms: "Please accept our service Terms &amp; Conditions"
                },
        errorPlacement: function(label, element) {
                        if (element.is("#your-input-field")) {
                            label.appendTo("#your-div");
                            
                            }
                        }        
                
              }
        });
        
        });
</script>

Open in new window


notes:

#your-input-field: the id of the input field being validated.
#your-div: the id of the element you want your error message appended to.
label: the error message
0
 
Kyle HamiltonData ScientistCommented:
Adjustment. You may need to specify the default behaviour for other fields.

 
<script>
$(function() {

jQuery.validator.addMethod("alpha", function(value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z]+$/);
},"Only Characters Allowed.");
        
$('#Registration').validate({
        rules: {
                FirstName: {required:true, alpha:true},
                LastName: {required:true},
                Email: {required:true, email:true},
                AcceptTerms: {
                        required:true
                        
            
                
        },      
        messages: {
            FirstName: "Please enter your First Name",
            LastName: "Please enter your Last Name",
            Email: "Please enter a valid Email address",
            AcceptTerms: "Please accept our service Terms &amp; Conditions"
                },
        errorPlacement: function(label, element) {
                        if (element.is("#your-input-field")) {
                            label.appendTo("#your-div");
                            
                            }
                        else if (element.is("input, textarea")){
                            // defualt placement
                            label.insertAfter(element); // or whatever you want here...
                        } 
                        }
                
              }
        });
        
        });
</script>

Open in new window

0
 
RefaelAuthor Commented:
kozaiwaniec thank you so much. it works perfect!
0
 
Kyle HamiltonData ScientistCommented:
:))
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

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

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now