Canvas Support

Radio button error message on submit

10 replies · opened Jun 10, 2019

SsupermanageJun 10, 2019

Hello I have copied and modified the form from forms-car-rental.html

I am using the buttons to show/hide elements it is required but I can't seem to show the errors, here's my code.

	
			
			[
			Cash
			](#tab-cash-payment)
			[
			Card
			](#tab-card-payment)
			
			
				
				Pay cash on collection or delivery.
				
				
					
						
						Card Number*
						
						
						
						Expiry*
						
						
						
						CVC*
						
						
						
						
						
						
						Same billing address as delivery address?
						
						
						
						
						
						Address:
						
						
						
						Address 2:
						
						
						
						Postcode

Can you help show error message if it isn't filled in? Cheers.

SsupermanageJun 13, 2019

any chance of a reply on this? It's been a few days.

SSemicolon WebSTAFFJun 14, 2019

Hello,

Thanks for your Patience and Apologies about the Delay in replying to your Support Query!

Simply adding the .form-group Class to the `` DIV should fix this issue. So your final code should look like this:

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SsupermanageJun 14, 2019

Ok that does help but it only focuses in gray not red.

SSemicolon WebSTAFFJun 15, 2019

Hello,

We have just checked out your Website and the Issue here is probably with the <input> being inside <a> Tag which is not Valid HTML: https://validator.w3.org/nu/?doc=https%3A%2F%2Fabushah.in%2Flm%2Fcheckout.php .

Additionally, currently highlighting of the Button from Gray to Red is not supported at the moment out of the box. You will need to add your Custom Codes to make this work. Moreover, you also appear to be using your own Custom JS Codes for processing the Form which negates the Default Functionality of the Form Validation included with Canvas, which also again is not included with the Item Support.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SsupermanageJun 17, 2019

The toggle part is copied exactly from the forms-car-rental.html so the input is already present in your example.

I can live without it being red, can you tell me how to achieve the attached picture (error message), it is from this page.

http://themes.semicolonweb.com/html/canvas/forms-car-rental.html

Thanks

SSemicolon WebSTAFFJun 17, 2019

Hello,

You will need to Edit the following code: 

$("#shipping-form").validate();

and add the following parameters to it: 

errorPlacement: function(error, elementItem) {
	if( elementItem.parents('.form-group').length > 0 ) {
		error.appendTo( elementItem.parents('.form-group') );
	} else {
		error.insertAfter( elementItem );
	}
}

You can check the ajaxForm: function() Function Block in the js/functions.js File for more options for this.

Regarding this:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fthemes.semicolonweb.com%2Fhtml%2Fcanvas%2Fforms-car-rental.html

This is an absolute error on on of Our Developer's Part which we would like to apologize for and we will release a fix shortly on this!

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SsupermanageJun 18, 2019

OK I appreciate that however I need to fix that tab issue with input being nested inside an A tag. Can you suggest how to fix or provide me an alternative where I can open up a section but require a value with it e.g. card or cash opens up different div/section when form submitted I need to know which section was open so I can validate.

Cheers.

SSemicolon WebSTAFFJun 20, 2019

Hello,

We have updated the codes to fix the Validation Errors and now the validation works perfectly fine with our Default Codes. Consider using this updated Template: https://www.dropbox.com/s/w0cku952etmqht8/forms-car-rental.html?dl=1 .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard