jqueryjquery-mobilejquery-validate

JQuery Validate Uncaught TypeError: Cannot read property 'settings' of undefined

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>

Solution

  • 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.