mailhandler script and validation

[jscheuer1]

I would try (assuming mixedlollybartypes is the class name of the label, and that the label contains the select, and that there's no other element with the class mixedlollybartypes):

mixedlollybartypes:$('.mixedlollybartypes').find('select').val().join(','),

Or (to take account for the possibility that none might be selected):

mixedlollybartypes:(function(){var val = $('.mixedlollybartypes').find('select').val(); return val? val.join(',') : '';})(),

Or (using the method in your post):

mixedlollybartypes:(function(){
	var val = [];
	$('.mixedlollybartypes').find(":selected").each(function(i, s){
		val.push($(s).text());
	});
	return val.join(',');
})(),

[Foundas]

Hi John,

I have one more question with this form...I added a confirm-email field and I am looking for a way so that regular expression can check if both fields entered match.

currently, the first email field has this:

rx:{
".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},

the new variable is emailconf.... how can I have in the rx:{} section when the form gets validated, a condition if .email==.emailconf ???

thanking you in advance

[jscheuer1]

I would not use regular expression for that. I would simply confirm that the second is identical (===) to the first. If not, throw an error.

[Foundas]

Hi John,

thanks for the guideline.

I added the following in the form...

// check if emails are the same
$('.erroremail').hide();
$('#email2').change(function() {
var email1 = $('#email1').val();
var email2 = $('#email2').val();
if(email2 != '' ) {
if(email1 == email2 ){
$('.erroremail').fadeOut();
}
else{
$('.erroremail').fadeIn();
}
}

});

the code works fine but i have a visual issue...the rest of the error messages slideUp or Down instead of fadeIn() i used above.

when i used the slideUp() function, to hide the element, the form elements below the .erroremail message, flicker...like jump up...whereas error message with the other boxes, move fluently

any idea what could be wrong?

[jscheuer1]

I would have to see the page to know what to do exactly. In general, there should be a container element that's positioned static, or perhaps even relative, that has enough width and height to contain the absolutely positioned message div which can then slide up or down within that without changing the surrounding layout. Often jQuery takes care of part or all of that though, it depends how it's setup.

[jscheuer1]

I see that all the other error fields are class="error". Why is the confirmation email one different (erroremail)? Also, I cannot find rx from your previous post, where is that?

[Foundas]

Hi John,

from the link I gave you to see the form, you can see the formsbk.js file

the rx:

rx:{
".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
".telephone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
".address":{rx:/.{5}/,target:'input'},
".suburb":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".eventtype":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
".eventdate":{rx:/.{5}/,target:'input'},
".guests":{rx:/.{2}/,target:'input'},
".location":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'select'},
".surfacearea":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'select'},
".verification":{rx:/2/,target:'input'}
},

as for the class name....I couldn't have it as .error since that class is handled (shown or hidden) by the formsbk.js. And also, the error message gets its validation from rx...in the case I want to compare 2 fields, I am not using reg-exp but plain jquery function

The .erroremail appears only if the email1 and email2 fields are not the same (onchange event of email2)

[jscheuer1]

Right, I figured that out. What I think we should do is get formsbk.js to handle this by editing the isValid function allowing it to use a function instead of an rx if so configured in the main rx object. I'm not certain exactly how that would work so back up everything you have now first. What I think would work is adding this (highlighted) to the rx object:

					rx:{
						".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
						".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
						".emailconf":{rx:function(v){return v===_.getValFromLabel($('.email',th));},target:'input'},
						".telephone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
						".address":{rx:/.{5}/,target:'input'},
						".suburb":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
						".eventtype":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
						".eventdate":{rx:/.{5}/,target:'input'},
						".guests":{rx:/.{2}/,target:'input'},
						".location":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'select'},
						".surfacearea":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'select'},
						".verification":{rx:/2/,target:'input'}
					},

And changing the isValid function to (additions highlighted, but just replace it with this):

					isValid:function(el){							
						var ret=true
						$.each(_.rx,function(k,d){
							if(el.is(k))
								if(typeof d.rx === 'function'){
									ret=d.rx(el.find(d.target).val());
								} else {
									ret=d.rx.test(el.find(d.target).val());
								}									
						})
						return ret							
					},

That would also mean removing:

	// check if emails are the same
    $('.erroremail').hide();
	$('#email2').change(function() {
    	var email1 = $('#email1').val();
    	var email2 = $('#email2').val();
    	if(email2 != '' ) {
    		if(email1 == email2 ){
      			$('.erroremail').slideUp();
    		}
   	 		else{
      			$('.erroremail').slideDown();
    		}
    	}
	});

And changing the erroremail span's class to just error.

That should do it.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Let me know what happens. I just did this in a mock up and it worked.

[Foundas]

You are the best John...works perfectly now!!!!

many thanks for all your support