Canvas Support

Prob with required in form

8 replies · opened Mar 26, 2021

AAlbertoPortapugliaMar 26, 2021

Hi,

I just added a checkbox in contact form (I added the code at the endow the mail)

here' s the prob
By clicking on “send message” button with NO field compiled, the text “This field is required” appears

By clicking on “send message” button with some fields compiled, the text “This field is required” does NOT appears

<form class="mb-0" id="template-contactform" name="template-contactform" action="include/form.php" method="post">

&lt;div class="form-process"&gt;
	&lt;div class="css3-spinner"&gt;
		&lt;div class="css3-spinner-scaler"&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
	&lt;div class="col-md-4 form-group"&gt;
		&lt;label for="template-contactform-name"&gt;Name &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
		&lt;input type="text" id="template-contactform-name" name="template-contactform-name" value="" class="sm-form-control required" /&gt;
	&lt;/div&gt;

	&lt;div class="col-md-4 form-group"&gt;
		&lt;label for="template-contactform-email"&gt;Email &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
		&lt;input type="email" id="template-contactform-email" name="template-contactform-email" value="" class="required email sm-form-control" /&gt;
	&lt;/div&gt;

	&lt;div class="col-md-4 form-group"&gt;
		&lt;label for="template-contactform-phone"&gt;Phone&lt;/label&gt;
		&lt;input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control" /&gt;
	&lt;/div&gt;

	&lt;div class="w-100"&gt;&lt;/div&gt;

	&lt;div class="col-md-12 form-group"&gt;
		&lt;label for="template-contactform-subject"&gt;Subject &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
		&lt;input type="text" id="template-contactform-subject" name="subject" value="" class="required sm-form-control" /&gt;
	&lt;/div&gt;

	&lt;div class="w-100"&gt;&lt;/div&gt;

	&lt;div class="col-12 form-group"&gt;
		&lt;label for="template-contactform-message"&gt;Message &lt;small&gt;*&lt;/small&gt;&lt;/label&gt;
		&lt;textarea class="required sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"&gt;&lt;/textarea&gt;
	&lt;/div&gt;

	&lt;div class="form-check"&gt;
		&lt;input class="form-check-input required" type="checkbox" id="template-contactform-mobile" name="template-contactform-checkbox[]" value="Confirmed"&gt;
		&lt;label class="form-check-label" for="template-contactform-mobile"&gt;By sending this message I confirm that I have read and accepted the conditions of the [privacy policy](Privacy_Policy.php)&lt;/label&gt;
	&lt;/div&gt;

	&lt;div class="w-100"&gt;&lt;br&gt;&lt;/div&gt;

	&lt;div class="col-12 form-group d-none"&gt;
		&lt;input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" /&gt;
	&lt;/div&gt;

	&lt;div class="col-12 form-group"&gt;
		&lt;button class="button button-3d m-0" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit"&gt;Send Message&lt;/button&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;input type="hidden" name="prefix" value="template-contactform-"&gt;

</form>

SSemicolon WebSTAFFMar 27, 2021

Hello,

Apologies for the Inconveniences caused!

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFMar 29, 2021

Hello,

Thanks for your Patience!

We are still investigating this and will get back to you shortly.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFMar 30, 2021

Hello,

The issue is something else. The Checkboxes are validating successfully (even if no checked) when other Form Fields are Valid but not validating when other Form Fields are Invalid. This appears to be a Plugin Issue (not the codes within Canvas) and we are working on variations of this to find out what works best in this scenario. This might take slightly longer than expected. We will keep you updated. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFMar 30, 2021

Hello,

Update! This is working as expected but the issue is with the Plugin removing the "The Field is required" message after all the Fields have been filled and you press the Submit button, because it focuses on the Checkbox which is why the Message is not displayed anymore (when you click outside the checkbox and click somewhere else the message displays again). Notice that when you try to press the Button while the checkbox is not checked, the Form cannot be submitted.

While this is not an issue and is a default functionality of the Validation Plugin, you can consider using the following CSS code to make it a bit more interactive:
[ch_pre type="css"]input[type="checkbox"]:not(:checked) + label.error {
display: none !important;
}

input[type="checkbox"].error:not(:checked) ~ label.form-check-label,
input[type="checkbox"].valid:not(:checked) ~ label.form-check-label {
color: red;
}[/ch_pre]

Hope this Helps!

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

AAlbertoPortapugliaMar 30, 2021

Thank you

..... so.... I have to create a css file and link it in <!-- Stylesheets --> lines in contact(.php) page??

this in advance

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