Link to home
Start Free TrialLog in
Avatar of Refael
RefaelFlag for United States of America

asked on

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

Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

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.
Avatar of Refael

ASKER


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.       
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.
Avatar of Refael

ASKER


kozaiwaniec thanks,

still does not work. the error is printed at the default location.
Would you be able to post a link to your page?
Avatar of Refael

ASKER


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

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
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Refael

ASKER

kozaiwaniec thank you so much. it works perfect!