Bug Tracker

Ticket #2498: example.html

File example.html, 8.1 kB (added by mrpollo, 10 months ago)

test scenario i used

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>Untitled Document</title>
6    <style type="text/css">
7    .nextEl{
8        width:100%;
9        margin-top:5px;
10        margin-bottom:10px;
11    }
12    .errorAdvise{
13        /*background-color:Gainsboro;
14        padding-top:5px;
15        padding-bottom:10px;*/
16        padding-left:20px;
17        background:Gainsboro url(../../images/unchecked.gif) no-repeat left;
18    }
19    .error{
20        color:red;
21        font-weight:bold;
22    }
23    .checked{
24        padding-left:20px;
25        background:GreenYellow url(../../images/checked.gif) no-repeat left;
26    }
27    </style>
28<script src="/js/jquery.js" type="text/javascript"></script>
29<script src="/js/ui.datepicker.js" type="text/javascript"></script>
30<script language="javascript" type="text/javascript">
31jQuery(document).ready(function(){
32    var validator = jQuery("#incidentReport").validate({
33        rules:{
34            title:"required",
35            genre:"required",
36            os:"required",
37            inet:"required",
38            browser:"required",
39           
40            ram:{
41                required:false
42            },
43            hdd:{
44                required:false
45            },
46            screenResolution:{
47                required:false
48            },
49            time:"required",
50            date:{
51                required:true,
52                dateISO: true
53            },
54            description:{
55                required:true,
56                minlength: 100
57            },
58            clasify:"required"
59
60        },
61        messages: {
62            title: "Enter a title for your incident",
63            genre: "Enter your lastname",
64            os: "Please Choose the operating system",
65            inet: "What Connection did you had at the moment?",
66            browser: "in what Browser did you experience this anomaly",
67            time: "do you remember the time when this ocurred? if not try your best guess",
68            date: "we need the date... again just try your best guess",
69            description:{
70                required: "This is the Long Description of your incident try being as descriptive as possible, keep in mind we are not machines... (maybe monkeys, or chickens)",
71                minlength: jQuery.format("Enter at least {0} characters")
72            },
73            clasify: "try and clasify the incident"
74        },
75        errorPlacement: function(error, element) {
76            console.log(element.parent());
77            element.parent().removeClass('checked');
78            element.parent().addClass("errorAdvise");
79            if (element.is(":radio")){
80                error.html('Error: '+error.html());
81                error.appendTo(element.parent().find('.nextEl'));
82            }else if(element.is(":checkbox")){
83                error.html('Error: '+error.html());
84                error.appendTo(element.parent().find('.nextEl'));
85            }else{
86                error.html('Error: '+error.html());
87                error.appendTo(element.parent().find('.nextEl'));
88            }
89           
90            /*if ( element.is(":radio") )
91                error.appendTo( element.parent().next().next() );
92            else if ( element.is(":checkbox") )
93                error.appendTo ( element.next() );
94            else
95                error.appendTo( element.parent().next() ); */
96        },
97        // set this class to error-labels to indicate valid fields
98        success: function(label) {
99            // set   as text for IE
100            label.parent().parent().removeClass('errorAdvise');
101            label.parent().parent().addClass('checked');
102            label.html(" ");
103        }
104    });
105    jQuery("#date").attachDatepicker();
106});
107</script>
108
109</head>
110
111<body>
112    <div id="addNewForm">
113        <form id="incidentReport" action="/actions/reportIncident.php">
114           
115            <div class="row">
116                <label>Title of Incident:</label>
117                <input type="text" name="title" />
118                <div class="nextEl"></div>
119            </div>
120           
121            <div class="row">
122                <label>Genre:</label>
123                <select name="genre" >
124                    <option>Please Choose One</option>
125                    <option>banner</option>
126                    <option>forms</option>
127                    <option>images</option>
128                    <option>flash</option>
129                    <option>audio</option>
130                    <option>copy</option>
131                </select>
132                <div class="nextEl"></div>
133            </div>
134           
135            <div class="row">
136                <label>Operating System:</label>
137                 <select name="os" >
138                    <option>Please Choose One</option>
139                    <option>Windows 98</option>
140                    <option>Windows XP</option>
141                    <option>Windows 2000</option>
142                    <option>Windows Vista</option>
143                    <option>Mac OSX 10.4.x</option>
144                    <option>Mac OSX 10.5.x</option>
145                    <option>Linux</option>
146                    <option>Nokia Nseries (N95,N92,N85 etc)</option>
147                    <option>Windows Mobile</option>
148                    <option>Iphone</option>
149                    <option>Other</option>
150                </select>
151                <div class="nextEl"></div>
152            </div>
153           
154            <div class="row">
155                <label>Internet Connection:</label>
156                <select name="inet" >
157                    <option>Please Choose One</option>
158                    <option>Dial Up</option>
159                    <option>Cable</option>
160                    <option>T1</option>
161                </select>
162                <div class="nextEl"></div>
163            </div>
164           
165            <div class="row">
166                <label>Browser:</label>
167                 <select name="browser" >
168                    <option>Please Choose One</option>
169                    <option>FireFox 2.x</option>
170                    <option>FireFox 3</option>
171                    <option>Microsoft Internet Explorer 6</option>
172                    <option>Microsoft Internet Explorer 7</option>
173                    <option>Microsoft Internet Explorer 8</option>
174                    <option>Safari 1.x</option>
175                    <option>Safari 2.x</option>
176                    <option>Safari 3.x</option>
177                    <option>Safari (Iphone)</option>
178                    <option>Opera</option>
179                    <option>Other</option>
180                </select>
181                <div class="nextEl"></div>
182            </div>
183           
184            <div class="row">
185                <label>Ram:</label>
186                <input type="text" name="ram" />
187                <div class="nextEl"></div>
188            </div>
189           
190            <div class="row">
191                <label>HDD free space:</label>
192                <input type="text" name="hdd" />
193                <div class="nextEl"></div>
194            </div>
195           
196            <div class="row">
197                <label>Screen Resolution:</label>
198                <input type="text" name="screenResolution" />
199                <div class="nextEl"></div>
200            </div>
201           
202            <div class="row">
203                <label>Time of Incident:</label>
204                <input type="text" name="time" />
205                <div class="nextEl"></div>
206            </div>
207           
208            <div class="row">
209                <label>Date of Incident:</label>
210                <input type="text" name="date" id="date" />
211                <div class="nextEl"></div>
212            </div>
213           
214            <div class="row">
215                <label>Brief Description:</label>
216                <!--<input type="text" name="title" />-->
217                <textarea name="description" cols="35" rows="5"></textarea>
218                <div class="nextEl"></div>
219            </div>
220           
221            <div class="row">
222                <label>Clasify the error:</label>
223                <input type="radio" name="clasify" style="width:25px;" />&lt;-medium<input type="radio" name="clasify" style="width:25px;" />&lt;-several<input type="radio" name="clasify" style="width:25px;" />&lt;-critical
224                <div class="nextEl"></div>
225            </div>
226            <input type="submit" value="Submit" style="width:50px;" />&nbsp;<input type="reset" value="Reset" style="width:50px;" />
227           
228        </form>
229    </div>
230
231</body>
232</html>