Forums

Multiplier and mask

FloB 17 Aug, 2016
Hello,

I've got a multiplier content with a text box and 2 radios box.
The text box is required and need to match the mask :"dd-mm-yyyy".

Every thing is ok for the first entry (required and mask).
But for the nexts (when click on green button), the required is working but not the mask.

If an example is helpfull to understand, my form is here :
http://club-alpin-francais-vienne.fr/index.php?option=com_chronoforms5&chronoform=CalculAdhesionRenouv

Any idea to solve that?

Thanks
Florence
GreyHead 18 Aug, 2016
Hi Florence,

Hmmm, I suspect that the problem here is that the mask code is added when the page is loaded and, at that time, the remaining multiplier elements don't exist.

It might be possible to add the mask using JavaScript linked to the Add button click; or possibly a custom validation might work better . . .

Bob
FloB 18 Aug, 2016
Hi Bob,

I don't really mind the mask but I need the validation associated.
I'm trying with jQuery but I think I'm wrong somewhere. My code (I had add "dateN" in the class for the textbox) :
jQuery(document).ready(function() {

	jQuery.validator.addMethod("datenaissance", function(value, element) {
		return this.optional(element) || /(^(((0[1-9]|[12][0-8])[-](0[1-9]|1[012]))|((29|30|31)[-](0[13578]|1[02]))|((29|30)[-](0[4,6,9]|11)))[-](19|[2-9][0-9])\d\d$)|(^29[-]02[-](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)/.test(value);
		}, "Date au format : dd-mm-yyyy");
	
	jQuery("#chronoform-CalculAdhesionRenouv").validate({
		rules: {
			".dateN":{
				"required": true,
				"datenaissance" : true
			},
		}
	});
});


Seems I've got no error but the validation doesn't work (required or my method).

I know it's not about Chronoforms anymore, but could you help me please?

Thanks,
Florence
GreyHead 19 Aug, 2016
Hi FloB,

Please see the Working with JavaScript section in this FAQ.

There is a problem with the multiplier that if doesn't have an onAdd event built in so you can't easily trigger JavaScript when a new row is added. There is also a problem in that code like validation (and masks) is applied when the page is loaded and there isn't an easy way to add new validation or masks after that.

I got round this using the code in the FAQ which watches the Add button, waits a little to allow the Add code to complete then runs some JavaScript. I have got validation to work using the jQuery validation library. You do need to make sure that the library is being loaded though.

Bob
This topic is locked and no more replies can be posted.

VPS & Email Hosting 20% discount
hostinger