Javascript and jquery validation for Tab

By | January 11, 2013

Tabs uses for  quick loading and load the page content without page refresh. In Tab the form validation can be done using through javascript and jquery concepts. From following coding the form can validated. Just include the jquery css file and min.js file  provided below. You can change or add newfiled for validation by adding filedname and alert message in jquery coding.

Download the files and include in head : javascript and jquery validation for tab

Javascript and jquery validation for Tab

Javascript and jquery validation for Tab

 

tab.php

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
<form id="custom">
<fieldset title="Tab 1">
<legend>step 1</legend>
<label>User:</label>
<!-- Hidden fields are not focused. -->
<input type="hidden" name="hidden" />
<!-- Disabled fields are not validated. -->
<input type="text" value="wbotelhos" size="40" name="user" disabled="disabled" />
<label>E-mail:</label>
<input type="text" size="40" name="email" />
<input type="checkbox" name="checked" /> Checked?
<label>Newsletter?</label>
<input type="radio" name="newsletter" /> Yep
<input type="radio" name="newsletter" /> Nop
<label>Password:</label>
<input type="password" name="password" size="40" />
</fieldset>

<fieldset title="Thread 2">
<legend>description two</legend>
<label>Nick Name:</label>
<input type="text" size="30" />
<label>Bio:</label>
<textarea name="bio" rows="5" cols="60"></textarea>
</fieldset>

<fieldset title="Thread 3">
<legend>description three</legend>
<label>Birthday:</label>
<select name="day">
<option></option>
<option>23</option>
</select>
<select>
<option>10</option>
</select>
<select>
<option>1984</option>
</select>
<label>Site:</label>
<input type="text" name="site" size="40" />
</fieldset>

<input type="submit" class="finish" value="Finish!" />
</form>

Jquery validation: If you add new filed you need to validate it just add name and alert message for the name wrong.

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<script type="text/javascript">
$(function() {

$('#default').stepy();

$('#custom').stepy({
backLabel: 'Backward',
block: true,
errorImage: true,
nextLabel: 'Forward',
titleClick: true,
validate: true
});

$('div#step').stepy({
finishButton: false
});

// Optionaly

$('#custom').validate({
errorPlacement: function(error, element) {
$('#custom div.stepy-error').append(error);
}, rules: {
'user': { maxlength: 1 },
'email': 'email',
'checked': 'required',
'newsletter': 'required',
'password': 'required',
'bio': 'required',
'day': 'required'
}, messages: {
'user': { maxlength: 'User field should be less than 1!' },
'email': { email: 'Invalid e-mail!' },
'checked': { required: 'Checked field is required!' },
'newsletter': { required: 'Newsletter field is required!' },
'password': { required: 'Password field is requerid!' },
'bio': { required: 'Bio field is required!' },
'day': { required: 'Day field is requerid!' }
}
});

$('#callback').stepy({
back: function(index) {
alert('Going to step ' + index + '...');
}, next: function(index) {
if ((Math.random() * 10) < 5) {
alert('Invalid random value!');
return false;
}

alert('Going to step ' + index + '...');
}, select: function(index) {
alert('Current step ' + index + '.');
}, finish: function(index) {
alert('Finishing on step ' + index + '...');
}, titleClick: true
});

$('#target').stepy({
description: false,
legend: false,
titleClick: true,
titleTarget: '#title-target'
});

});
</script>

Include the following file in your <head> tags. Download the below file in below  link.

1
2
3
4
5
6
7
<link type="text/css" rel="stylesheet" href="jquery.stepy.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.stepy.min.js"></script>

Download the files here: javascript and jquery validation for tab

Page look like this…

 

3 thoughts on “Javascript and jquery validation for Tab

  1. Rajesh

    The Validation error is displaying at the bottom of the page its not fare, so i want to display it below of each input field . Any suggestion regarding this.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *