jquery mobile checkbox validation

arielbf
arielbf used Ask the Experts™
on
I'm trying to have this form - however the validation is not working... any ideas?

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" CONTENT="0">
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="css/themes/default/rtl.jquery.mobile-1.4.0.css" rel="stylesheet" />
<script src="js/rtl.jquery.mobile-1.4.0.js"></script>
</head>

<body>

<div data-role="page">

<div data-role="header" data-theme="b">
    <h1>title</h1>
</div>


<div data-role="content">
    <fieldset>
	
	<form action="try.html" name="form1" method="post" data-ajax="false" class="ui-body ui-body-a ui-corner-all">

	
	
	<fieldset data-role="controlgroup">
	<legend>checkboxes (please check 2 options)</legend>		
	
	
	<p>
		<input type='checkbox' name='q2[]' id='q2_0' value='0' maxlenght="2" minlength="2">
		<label for="q2_0">answer0</label>
		
		<input type='checkbox' name='q2[]' id='q2_1' value='1'>
		<label for="q2_1">answer1</label>
		
		<input type='checkbox' name='q2[]' id='q2_2' value='2'>
		<label for="q2_2">answer2</label>
		
		<input type='checkbox' name='q2[]' id='q2_3' value='3'>
		<label for="q2_3">answer3</label>
		
		<input type='checkbox' name='q2[]' id='q2_4' value='4'>
		<label for="q2_4">answer4</label>
		
	</fieldset>
	
	
			<input type="hidden" value="3450" name="qid">			
			<input type="hidden" value="57350.47" name="st">			
			<input type="submit" data-theme="b" value="submit" id="submitButton" name="continue">
			
		</form>
		
		<script type="text/javascript" src="http://www.midgampanel.com/mobile/dist/localization/messages_he.js"> </script>
		<script>
		$("form1").validate();
		</script>
		
</fieldset>
</div>
</div>

<script>				
	function hidesubmit(){
	  $("#submitButton").closest("div").hide();
	  $("#q2_0").hide();
	}
	function showsubmit(){
	  $("#submitButton").closest("div").show();
	}
setTimeout(hidesubmit, 0);
setTimeout(showsubmit, 2700);
</script>

</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2008
Top Expert 2008
Commented:
>> $("form1").validate();
Give your form an id="form1", and change the above line to:

$(document).ready( function(){
  $('#form1').validate();
});

Also, be sure to import the validate plugin.

<!DOCTYPE html>
<html>
<head>
<base href="http://www.midgampanel.com/mobile/"/>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" CONTENT="0">
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="http://www.midgampanel.com/mobile/css/themes/default/rtl.jquery.mobile-1.4.0.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.midgampanel.com/mobile/js/rtl.jquery.mobile-1.4.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"/></script>
</head>

<body>

<div data-role="page">

<div data-role="header" data-theme="b">
    <h1>title</h1>
</div>


<div data-role="content">
    <fieldset>
	
	<form action="try.html" id="form1" method="post" data-ajax="false" class="ui-body ui-body-a ui-corner-all">

	
	
	<fieldset data-role="controlgroup">
	<legend>checkboxes (please check 2 options)</legend>		
	
	
	<p>
		<input type='checkbox' name='q2[]' class="checkbox" id='q2_0' value='0'>
		<label for="q2_0">answer0</label>
		
		<input type='checkbox' name='q2[]' class="checkbox" id='q2_1' value='1'>
		<label for="q2_1">answer1</label>
		
		<input type='checkbox' name='q2[]' class="checkbox" id='q2_2' value='2'>
		<label for="q2_2">answer2</label>
		
		<input type='checkbox' name='q2[]' class="checkbox" id='q2_3' value='3'>
		<label for="q2_3">answer3</label>
		
		<input type='checkbox' name='q2[]' class="checkbox" id='q2_4' value='4'>
		<label for="q2_4">answer4</label>
		
	</fieldset>
	
	
			<input type="hidden" value="3450" name="qid">			
			<input type="hidden" value="57350.47" name="st">			
			<input type="submit" data-theme="b" value="submit" id="submitButton" name="continue">
			
		</form>
		
		<script type="text/javascript" src="http://www.midgampanel.com/mobile/dist/localization/messages_he.js"> </script>
		<script type="text/javascript">
		$(document).ready(function(){
			var rules={'q2[]':{required:true,'minlength':2,'maxlength':2}}
			$("#form1").validate({'rules':rules});
		});
		</script>
		
</fieldset>
</div>
</div>

<script type="text/javascript" >				
	function hidesubmit(){
	  $("#submitButton").closest("div").hide();
	  $("#q2_0").hide();
	}
	function showsubmit(){
	  $("#submitButton").closest("div").show();
	}
setTimeout(hidesubmit, 0);
setTimeout(showsubmit, 2700);
</script>

</body>
</html>

Open in new window

Author

Commented:
Great, Thank you!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial