Forum

Thread tagged as: Question, Problem, Forms

Form problems with radios and checkboxes

Hi there,

Am having 2 difficulties (being a new perch user).

  1. My form is allowing me to post to the CMS, without producing the necessary error messages on radio buttons and checkboxes only.

  2. The browser also seems to override the error messages on text fields but I can not see my own error messages.

  3. Finally, it is not posting checkbox data to the database at all.

Please help! Been looking at this a while now and no joy! I'm sure it's newbie teething errors but can't fathom it.

Perch: 2.8.13, PHP: 5.5.30, MySQL: mysqlnd 5.0.11-dev - 20120503 - $Id: 15d5c781cfcad91193dceae1d2cdd127674ddb3e $, with PDO Server OS: Linux, cgi-fcgi Installed apps: content (2.8.13), assets (2.8.13), categories (2.8.13), perch_blog (4.6), perch_forms (1.8.3) App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_forms', 'perch_blog' ); PERCH_LOGINPATH: /admin PERCH_PATH: /home/concentrate/subdomains/westie.concentrate.co.uk/admin PERCH_CORE: /home/concentrate/subdomains/westie.concentrate.co.uk/admin/core PERCH_RESFILEPATH: /home/concentrate/subdomains/westie.concentrate.co.uk/admin/resources Image manipulation: GD Imagick PHP limits: Max upload 2M, Max POST 8M, Memory: 320M, Total max file upload: 2M F1: dc1fef2ad0fcd9f943c02ebb43d85dbc Resource folder writeable: Yes DOCUMENT_ROOT: /home/concentrate/subdomains/westie.concentrate.co.uk HTTP_HOST: westie.concentrate.co.uk REQUEST_URI: /admin/core/settings/diagnostics/ SCRIPT_NAME: /admin/core/settings/diagnostics/index.php

<perch:form id="application_to_adopt" method="post" app="perch_forms" class="form-horizontal">


    <div class="container text-content">

        <h3 class="heading-style blue-wrapper">About you, your family &amp; your home</h3>

            <div class="row">
                <perch:label for="Wherewouldyouwantyourdogtolive" class="col-md-7">Where would you want your dog to live? (click all that apply)</perch:label>
                <div class="col-md-5 alignright">

                    <perch:label for="Wherewouldyouwantyourdogtolive" class="checkbox-inline">
                        <input type="checkbox" id="House" value="True" label="House">House 
                    </perch:label>

                    <perch:label for="Wherewouldyouwantyourdogtolive" class="checkbox-inline">
                        <input type="checkbox" id="Garden" value="True" label="Garden">Garden 
                    </perch:label>

                    <perch:label for="Wherewouldyouwantyourdogtolive" class="checkbox-inline">
                        <input type="checkbox" id="Garage" value="True" label="Garage">Garage 
                    </perch:label>

                    <perch:label for="Wherewouldyouwantyourdogtolive" class="checkbox-inline">
                        <input type="checkbox" id="Shed" value="True" label="Shed">Shed 
                    </perch:label>

                    <perch:error for="Wherewouldyouwantyourdogtolive" type="required">Please select one</perch:error>
                </div>
            </div>

            <div class="row">
                <perch:label for="Headofhousefulltimeemployed" class="col-md-8">Is the head of the household in fulltime employment?</perch:label>
                <div class="col-md-4 responsive-alignment radio-inline">
                    <perch:input id="Headofhousefulltimeemployed" type="radio" options="Yes,No" wrap="div.radiowrapper" label="Is the head of the household in fulltime employment?" />
                </div>
                <perch:error for="Headofhousefulltimeemployed" type="required">Please select one</perch:error>
            </div>

            <div class="row confirmation">
                <div class="col-md-12">
                    <perch:label for="confirmation" class="checkbox-inline">
                        <input type="checkbox" id="Yes" value="True"> 
                        I confirm I have understood and answered all of the above questions truthfully and to the best of my knowledge
                    </perch:label>
                    <perch:error for="confirmation" type="required">Please confirm</perch:error>
                </div>
            </div>

            <div class="row alignright">
              <div class="col-sm-offset-2 col-sm-10">
                <perch:input type="submit" id="submit" value="Submit Form" class="btn btn-info" />
              </div>
            </div>

        </div>
    </div>


    <perch:success>
        Thank you!
    </perch:success>

</perch:form>
Gary Ward

Gary Ward 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

My form is allowing me to post to the CMS, without producing the necessary error messages on radio buttons and checkboxes only.

I don't see any required checkboxes in your form. If you add the required="true" attribute, the form shouldn't successfully complete without them.

The browser also seems to override the error messages on text fields but I can not see my own error messages

That's a feature of modern browsers. You can disable it using the standard novalidate attribute on the form tag. For Perch forms, add novalidate="novalidate" on the perch:form tag.

Finally, it is not posting checkbox data to the database at all.

Your checkboxes need to be perch:input fields for Perch to process them. At the moment you have standard input fields.
Gary Ward

Gary Ward 0 points

5 years ago

This is really helpful thank you.

It's a huge form (though I've only posted a snippet) and a while since I've had to do any form work - and to be honest, I think these are just silly newbie errors and a case of 'not seeing the wood for the trees'.

I think I may have been looking at it too long... added the inputs to my radio buttons but failed to add it to the checkboxes!

Many thanks
Gary Ward

Gary Ward 0 points

5 years ago

In reply to your answer above Drew,

Can you advise how validation is added to inline checkboxes in perch. I've used the following:

<div class="row">
                    <perch:label for="Possessive" class="col-md-7">11. Is your dog possessive of any of the following?</perch:label>
                    <div class="col-md-5 responsive-alignment">
                        <perch:label for="Possessive" class="checkbox-inline">
                            <perch:input type="checkbox" id="people" value="People" required="true">People 
                        </perch:label>

                        <perch:label for="Possessive" class="checkbox-inline">
                            <perch:input type="checkbox" id="food" value="Food" required="true">Food 
                        </perch:label>

                        <perch:label for="Possessive" class="checkbox-inline">
                            <perch:input type="checkbox" id="toys" value="Toys" required="true">Toys 
                        </perch:label>

                        <perch:label for="Possessive" class="checkbox-inline">
                            <perch:input type="checkbox" id="none" value="None" required="true">None 
                        </perch:label>

                        <perch:error for="Possessive" type="required">Please select at least one</perch:error>
                    </div>
                </div>

but this requires them to tick every checkbox. How is this set to make it required that they tick at least one but don't have to tick all?

Is there a way of doing this similarly to how radio buttons are laid out, like value="People,Food,Toys,None" - that kind of thing?

Thanks

Gary
Drew McLellan

Drew McLellan 2638 points
Perch Support

5 years ago

How is this set to make it required that they tick at least one but don't have to tick all?

That construct doesn't exist within the Forms app. My best suggestion would be to use some JavaScript to enforce it.
Gary Ward

Gary Ward 0 points

5 years ago

Many thanks for clarifying this. Will do so.