Listview Filter within a Form
There is an issue using Listview Filter within a HTML form. It causes wrong references to the form object for other code, such as the jQuery Validation plugin.
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form id="the-form">
<p>Pick your favorite statement:</p>
<ul data-role="listview" data-filter="true" data-inset="true">
<li>
<label data-corners="false">
<input type="radio" name="a-radio" value="dog" required />
The dog barks
</label>
</li>
<li><label data-corners="false">
<input type="radio" name="a-radio" value="cow" required />
The cow moo's
</label></li>
<li><label data-corners="false">
<input type="radio" name="a-radio" value="cat" required />
The cat meows
</label></li>
</ul>
<button name="a-button" onclick="$('#the-form').valid();return false;">
Validate
</button>
</form>
CSS
/* Just some extra spacing for the jsFiddle Result screen */
#the-form {
padding: 10px;
}
/* Fix bug with the filter being under the list */
.ui-listview-filter {
margin-bottom: 2px;
}
/* Listview with radio buttons for each item */
.ui-listview li.ui-li-static {
padding: 0;
}
.ui-listview label {
border: 0;
margin: 0;
}
.ui-listview div,
.ui-listview label {
-webkit-border-radius: inherit;
border-radius: inherit;
}
/* Add a red shaded border to invalid items */
.ui-state-error {
-moz-box-shadow: inset 0 0 3px #900, 0 0 9px #900;
-webkit-box-shadow: inset 0 0 3px #900, 0 0 9px #900;
box-shadow: inset 0 0 3px #900, 0 0 9px #900;
}
JavaScript
$('#the-form').validate({
highlight: function() {
$('.ui-listview').addClass('ui-state-error');
$('.ui-btn-active').removeClass('ui-btn-active');
},
unhighlight: function() {
$('.ui-listview').removeClass('ui-state-error');
$('.ui-btn-active').removeClass('ui-btn-active');
},
errorPlacement: function() {}, // Disable the error messages
focusInvalid: false // Disable the invalid field focusing
});