webshim
webshim copied to clipboard
aFarkas
Trouble implementing
Hi, I'm having difficulty getting data-grouprequired="" to validate that one of a group of checkboxes is checked. Other webshim works great including adding my own styles! Not sure if this is an issue or I just don't "get it". Important code selections below.
Joy
...
<head>
<script src="inc/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="inc/webshim/js-webshim/minified/polyfiller.js" type="text/javascript"></script>
<script>
//webshim.setOptions('basePath', '/js-webshim/minified/shims/');
webshim.setOptions('forms', {
//show custom styleable validation bubble
replaceValidationUI: true,
lazyCustomMessages: true
});
//request the features you need:
webshim.polyfill('forms');
$(function(){
// use all implemented API-features on DOM-ready
});
</script>
....
....
<form action="contact-process.php" method="post" name="contactus">
<div>
<fieldset>
<legend>Contact Information:</legend>
<dl>
<div class="lbl"><label for="name">Name: * </div>
<input size="45" type="text" name="name" id="name" pattern="^[a-zA-Z\s\-\']+$" required class="valid" /></dl>
<dl >
<div class="lbl"><label for="email">Email: * </label></div>
<div><input size="45" type="email" name="email" id="email" placeholder="[email protected]" pattern="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$" required class="valid" /></div>
</dl>
<dl >
<div class="lbl"><label for="dept">Department: * </label></div>
<div><input size="45" type="text" name="dept" id="dept" placeholder="" pattern="^[a-zA-Z\s\-\']+$" required class="valid" /></div>
</dl>
</fieldset><br/>
<fieldset>
<legend>Services: * </legend>
<dl>
<div class="lbl"><label for="services">What BDMC services are you seeking? (mark all that apply)</label></div><br/>
<div style="padding: 0 3px;">
<input data-grouprequired="" type="checkbox" class="services" id="service1" name="service[]" value="Biostatistics" /> Biostatistics<br/><br/>
<input type="checkbox" class="services" id="service2" name="service[]" value="Data Management" /> Data Management<br/><br/>
<input type="checkbox" class="services" id="service3" name="service[]" value="Database Development" /> Database Development<br/><br/>
</div>
</dl>
</fieldset><br/>
<fieldset>
....
Not yet tested but: http://afarkas.github.io/webshim/demos/demos/forms.html#Custom-validity
webshim.setOptions('forms', { addValidators: true });
@paytonk
Does this work with the configuration above? The data-grouprequired is none-standard and all none-things have to be configured.
When I applied this attribute to all checkboxes, they had a red "invalid" shadow by default (before the box was ever focused). My kludgy solution was to add a hidden checkbox with the same name and the attribute and to remove the attribute from the other checkboxes. Maybe this can be improved.
