http://jquery.bassistance.de/validate/demo/jquerymobile.html
использую этот пример
но никак не могу организовать валидацию
для типа "search" (filter)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Listview Filter within a Form - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<style type='text/css'>
/* Just some extra spacing for the jsFiddle Result screen */
.ui-page {
padding: 10px !important;
}
/* 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;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$( '#the-list' ).wrap( $( '#the-form' ).clone().children().remove().end() );
$( '#the-form' ).contents().unwrap();
$( '#the-form' ).validate({ // Re-select the-form for the latest DOM location
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: true // Disable the invalid field focusing
});
});//]]>
</script>
</head>
<body>
<form id="the-form">
<div data-role="page">
<div data-role="content">
<p>Pick your favorite statement:</p>
<ul data-role="listview" data-filter="true" data-inset="true" id="the-list" >
<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>
</div>
</div>
</body>
</html>
может кто знает ?
