Canvas Support

Radio button error message on submit

10 replies·opened Jun 10, 2019
S
supermanageJun 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.

	<div class="col_full">
			<div class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons">
			<a href="#tab-cash-payment" class="btn btn-outline-secondary flex-fill" data-toggle="tab">
			<input type="radio" name="cash-payment" id="order-cash-payment" class="required" value="cash">Cash
			</a>
			<a href="#tab-card-payment" class="btn btn-outline-secondary flex-fill" data-toggle="tab">
			<input type="radio" name="card-payment" id="order-card-payment" class="required" value="card">Card
			</a>
			</div>
			<div class="tab-content">
				<div class="tab-pane fade mt-3" id="tab-cash-payment">
				Pay cash on collection or delivery.
				</div>
				<div class="tab-pane fade mt-3" id="tab-card-payment">
					<div class="row">
						<div class="col-md-6 col-sm-6 form-group">
						<label>Card Number*</label>
						<input type="text" name="card-number" class="sm-form-control required" value="" placeholder="16 digit card no">
						</div>
						<div class="col-md-3 col-sm-6 form-group">
						<label>Expiry*</label>
						<input type="text" name="card-expiry" class="sm-form-control required" value="" placeholder="MM/YY">
						</div>
						<div class="col-md-3 col-sm-6 form-group">
						<label>CVC*</label>
						<input type="text" name="card-cvc" class="sm-form-control required" value="" placeholder="3 digit CVC">
						</div>
						<div class="col-md-12 form-group">
						<div class="form-check">
						<input class="form-check-input" type="checkbox" id="billCheck">
						<label class="form-check-label" for="billCheck">
						Same billing address as delivery address?
						<!-- show form, hide checkbox if delivery order else show -->
						</label>
						</div>
						</div>
						<div class="col-6 form-group">
						<label for="billing-form-address">Address:</label>
						<input type="text" id="billing-form-address" name="billing-form-address" value="" class="sm-form-control" />
						</div>
						<div class="col-6 form-group">
						<label for="billing-form-address-2">Address 2:</label>
						<input type="text" id="billing-form-address2" name="billing-form-adress" value="" class="sm-form-control" />
						</div>
						<div class="col-6 form-group">
						<label for="billing-form-postcode">Postcode</label>
						<input type="text" id="billing-form-postcode" name="billing-form-postcode" value="" class="sm-form-control" />
						</div>
					</div>
				</div>
			</div>
		</div>

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

S
supermanageJun 13, 2019

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

S
SemiColonWebSTAFFJun 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 class="btn-group my-tab btn-group-toggle nav" data-toggle="buttons"> DIV should fix this issue. So your final code should look like this: 

<div class="btn-group my-tab btn-group-toggle nav form-group" data-toggle="buttons">

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.

S
supermanageJun 14, 2019

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

S
SemiColonWebSTAFFJun 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.

S
supermanageJun 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

S
SemiColonWebSTAFFJun 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.

S
supermanageJun 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.

S
SemiColonWebSTAFFJun 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