[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 263
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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