Zurb Foundation 4 custom form reset not working - html

Question

I am having trouble getting the reset button to clear checkboxes on a Foundation 4 custom form. I haven't found anything specifically talking about this issue so far. I found this post (which is Foundation 5): http://foundation.zurb.com/forum/posts/3317-refresh-form-on-click-of-cancel-button , which is slightly similar to my issue.
I modified the Codepen in the zurb forum above to help troubleshoot the issue to demonstrate my problem. As you can see, the reset button does not clear the checkbox. If I remove the "custom" class, the reset works. However, the look and functionality of the form relies on the custom class, so that's not an option.
http://codepen.io/jdkoelsch/pen/jzLgB
Here is the code from Codepen (stack overflow wants me to include code if I link to codepen.io)
<form class="custom" data-abide>
<div class="row">
<div class="small-12 medium-6 columns field1">
<label for="field1">Field1 <span class="required">Required</span>
<input id="field1" maxlength="20" name="field1" type="text" required pattern="alpha" placeholder="Field1">
<small class="error">Please enter something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field2">
<label for="field2">Field2 <span class="required">Required</span>
<input id="surname" maxlength="20" name="field2" type="text" required pattern="alpha" placeholder="Field2">
<small class="error">Please something valid.</small>
</label>
</div>
<div class="small-12 medium-6 columns field3">
<label for="field3">Field23 <span class="required">Required</span>
<input id="chkbox" name="field3" type="checkbox">
<small class="error">Please something valid.</small>
</label>
</div>
</div>
</form>
<div class="row">
<button class="clear">Clear</button>
</div>
Is there anything I can do (besides updating to Foundation 5) to get the reset button to work?

Answer 1

Looks like in your codepen example your not choosing the right selector, try "form div label". Also set the focus_on_invalid:false. Try the js below -
$(document).foundation({
abide : {
live_validate : true,
focus_on_invalid : false
}
});
$(".clear").on("click",function(){
$("form")[0].reset();
$("form div label").removeClass("error");
});