Menu
I am using JQuery Validate on a JQuery Mobile form that has a listview with an Auto Complete option that is created dynamically.
I get this error if you try and type into the auto complete field, once validation is active.
I can see that the problem is related to the form that jQuery Mobile creates to hold the filter input but I can not figure out how to stop jQuery Validate from validating the field.
I can reproduce it using JS Fiddle
(Press Validate and then type in the filter box)
Any suggestions appreciated
Thanks
<body>
<script>
jQuery.validator.setDefaults({
ignore: '[data-type="search"]'
});
</script>
<form>
<input required>
<ul id="ac" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
<li><a href="#">Acura</a>
</li>
<li><a href="#">Audi</a>
</li>
</ul>
<button onclick="$('#ac').attr('data-role','listview');$('#ac').listview();$('form').validate();">Validate</button>
</form>
314
Your whole problem is being cause by the dynamic HTML that is created by the listview() function. Inspecting the DOM reveals that this dynamically creates a new <form> container. Since you've placed listview within your <form> container, you now have <form></form> nested within <form></form>, which is very invalid HTML, and the whole reason the jQuery Validate plugin is working so unexpectedly.
The solution is to place your listview element outside of your <form> container.
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
