i use the code to split a form in to parts in different tabs...
<?php
session_start();
require_once('./server_validation/lib.php');?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<script src="./server_validation/jquery-1.4.2.js"></script>
<script src="./server_validation/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$('#my_form').validate({
'rules': <?php echo json_encode($validation_rules); ?>
});
});
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<form name="my_form" id="my_form" method="post" action="d1.php" enctype='multipart/form-data'>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p> <input type="text" name="textfield" id="textfield" /></p>
</div>
<div id="tabs-2">
<input type="text" name="name" id="name" />
</div>
<div id="tabs-3">
</div>
<input name="" type="submit" value="submit" />
</div>
</form>
</body>
</html>
tabs are working fine ad i can pass the data...
tabs from source
But the problem is while validating the fields...
This is the working executed php file code..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="./server_validation/jquery-1.4.2.js"></script>
<script src="./server_validation/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$('#my_form').validate({
'rules': {"name":{"required":true,"minlength":2,"maxlength":30},"dd_number":{"required":true,"maxlength":20},"textfield":{"required":true,"minlength":2,"maxlength":30}} });
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="my_form" id="my_form" method="post" action="reg.php" enctype='multipart/form-data'>
<label for="name"></label>
<input type="text" name="name" id="name" />
<label for='textarea'></label>
<input type="text" name="textfield" id="textfield" />
<input name='Submit' type='submit' value='Submit' />
</form>
</body>
</html>
validation source: http://anvweb.com/blog/server-side-form-validation-with-jquery-plugin-and-php/
Validation works fine in normal forms without tab... but not working in tabs.. wast is the problem??? thanks in advance...
Change the ignore settings in your validate call to a selector you don't use. by default ignore has ":hidden", and that's the reason why the components in hidden tabs don't get validated (i.e. they will pass, whatever their value is). by changing the ignore selector to a selector you will never use (like, e.g. ".jksfdhskhfbskeyh"), your fields will be validated as usual.
fiddle:
Html:
<form name="my_form" id="my_form" method="post" action="d1.php" enctype='multipart/form-data'>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p> <input type="text" name="textfield" id="textfield" /></p>
</div>
<div id="tabs-2">
<input type="text" name="name" id="name" />
</div>
<div id="tabs-3">
<input type="text" name="dd_number" id="dd_number" />
</div>
<input name="" type="submit" value="submit" />
</div>
</form>
jquery:
$(function() {
$("#tabs").tabs();
$('#my_form').validate({
ignore: [],
rules: {
"name": {"required": true, "minlength": 2, "maxlength": 30},
"dd_number": {"required": true, "maxlength": 20},
"textfield": {"required": true, "minlength": 2, "maxlength": 30}
}
});
});