To have a page be compliant with all government accessibility requirements, each form element should have a label. However, we have a birth date picker with three dropdowns: Day, Month, and Year. The visible label is simply "Birth Date".
Is there a way to:
Specify that a form element has no label?
Specify that a label is for multiple form elements?
You can specify a label for a group using <fieldset> and <legend>, however, this does not mean you can omit the individual label. In your example, you could argue that the proximity to the other selects serve as a "visual label", so you can use the title attribute to label each of the individual components and a fieldset/legend for the group
In your instance, you also need to indicate that the * indicates a required field
Here is some markup
<fieldset>
<legend>Date of Birth* <span class="offscreen">required</span></legend>
<select title="month">...</select>
<select title="day">...</select>
<select title="year">...</select>
<button title="pick date" class="datepicker"></button>
</fieldset>
Related
I am trying to add a select dropdown (That shows Product title, image and price) form field inside a contact form that enable user to select product and selected products show under the field. I am using this code but it only display 50 product and just showing product titles and product image path, not the actual image.
<label for="ContactFormProductNameField">Products</label>
<select id="ContactFormProductNameField" name="contact[Product]" required>
<option selected disabled>Choose your product</option>
<option value="Others - No product-related concerns">Others - No product-related concerns</option>
{% for product in collections['all'].products %}
<option value="{{ product.title }}">{{ product.title}}{{ product.featured_image}}</option>
{% endfor %}
</select>
On the first question why displaying only 50 products:
This could because of some data restriction from Shopify.
Did you check that collections['all'].products in the current context has length more than 50?
On the second one "just showing product titles and product image path, not the actual image."
{{ product.featured_image}} is probably just the image path not 'actual' image.
Also the HTML <option> tag can contain only text inside it.
It could not contain tag which is your intention. For that you will need custom select implementation.
Check this thread How to add images in select list?
I'm using Statamic CMS
I've got a checkbox group with two checkboxes, I'd like both of them to be checked before the form will submit.
Setting the field as 'required' half works. The form will error if nothing is checked, but it submits if one of the boxes is ticked.
I can see under the validation tab, there's a list of additional rules. But I'm not sure which rule to use.
If it helps, this is what the HTML checkbox group looks like:
<div>
<label>Contact permissions</label>
<span>Please tick both checkboxes</span>
<label>
<input type="checkbox" name="checkboxes[]" value="gdpr" />
Please contact me with the details I've provided
</label>
<label>
<input type="checkbox" name="checkboxes[]" value="terms" />
I agree with the terms and conditions
</label>
</div>
I'm using the {{ fields }} tag to generate the HTML
Within the CMS, under the validation tab, there's a link to the Laravel docs. As I want to validate two checkboxes, I think I need the required_with: rule, but I can't get it to work...
required_with: is looking for two values, the example shows this:
required_with:foo,bar,..
The values of the checkboxes are, value="gdpr" and value="terms" so I (wrongly) assume this should work...
required_with:gdpr,terms
After saving the changes and testing the form, it still submits? Even though only one of the checkboxes might be ticked...
What is the correct syntax/values to use to get this to work?
:) foo,bar in the docs are field names in your form. What you're doing with gdpr,terms are values.
Plus, since both your buttons are named checkboxes[], the form is validating that if either one is selected, then it should be passed. Hopefully this helps!
I have a country picker in my form like this:
<select class="bfh-countries text-left" name="country" id="country" data-country="DE">
</select>
I can get the value with jQuery like this:
$("#country").val()
but when i try to serialize the form with $("#myform").serializeArray() The value for "country" is an empty string.
How can i fix this?
I ran into this problem and it took me forever to find because there aren't any examples of it. What you really want to do is use data-name="country", which names the hidden variable on the back end as country. For the country picker, you can use the div tag as follows:
<div class="country bfh-selectbox bfh-countries" data-flags="true" data-filter="true" data-name="country" data-country="POSTBACK_VARIABLE_GOES_HERE"></div>
If you do this, you'll find a hidden variable that's added to the page as follows:
<input type="hidden" name="country" value="US">
The value above assumes you selected United States but it is entered as a 2 character code, which could then be entered as data-country above if you need to do server-side validation and display the page again without forcing the user to select the value all over again.
This was seriously a nightmare to find.
I have a form that is using the calendar/date selection tool within Ektron, but when users select the current date (or any date, for that matter), it gives an error saying that you need to select a date in the past.
We haven't tooled around in the code for this form, but it almost sounds like a validation issue.
Here's the code, as is, from Ektron.
<p align="center" style="text-align: left;">Date program was presented:
<ektdesignns_calendar title="Date presented" id="Date_presented" onblur="design_validate_xpath('number(translate(.,\'-\',\'\')) <= number(translate($currentDate,\'-\',\'\'))',this,'Date in the past (required)');" ektdesignns_name="Date_presented" ektdesignns_caption="Date presented" ektdesignns_invalidmsg="Date in the past (required)" ektdesignns_validate="xpath:number(translate(.,'-','')) <= number(translate($currentDate,'-',''))" ektdesignns_basetype="calendar" ektdesignns_datatype="date" ektdesignns_validation="datePast-req" name="Date_presented">
<input type="text" size="30" readonly="readonly" unselectable="on" />
<img width="16" height="16" class="design_fieldbutton" alt="Select date" src="[skinpath]btncalendar.gif" unselectable="on" /></ektdesignns_calendar></p>
My knowledge on validation is limited, but it looks like it's parsing the date as an integer. Is it possible to add a day (+1) to the current date so that it interprets any day as valid as long as it's not in the future?
I guess this is a HTML form as opposed to a Smart form?
If so, have you checked the validation settings on the calendar field? If you edit the form, right-click on the field and choose Field Properties you will get the properties window. Go to the Validation tab and check the setting in the Validation drop down.
There are options for ensuring the date is in the past or the future. Perhaps one of these options has been set?
I have a 'time select' form that is two select option elements, one for the hour and one for the minute (with 15 min granularity).
I only want 1 label saying 'choose time' as I think its obvious its hour and minute. Normally I associate a label with an input like so:
<label for="something">Label Text</label>
<input id="something" />
So what should I do in this case where the label relates to two elements?
Thanks
I'd label both inputs (hours, minutes, associated explicitly like you have), use one of the CSS techniques to hide them visually (but keep them in the DOM so they are available to AT). Then wrap everything in a fieldset and add a legend to the fieldset for "choose time".
Like this:
<fieldset>
<legend>Choose Time</legend>
<label for="hour">Hour</label>
<input id="hour" />
<label for="minute">Minute</label>
<input id="minute" />
</fieldset>