Skip to content

Commit 568d6c4

Browse files
author
pipeline
committed
Ej2 5149 label issue master
1 parent e7ba98a commit 568d6c4

File tree

4 files changed

+245
-149
lines changed

4 files changed

+245
-149
lines changed

‎production/react/demos/samples/form-validator/default/app/index.tsx

162 Bytes
Binary file not shown.

‎production/react/demos/src/form-validator/default.tsx

303 Bytes
Binary file not shown.

‎samples/form-validator/default/app/index.tsx

Lines changed: 119 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -43,80 +43,125 @@ export class Default extends SampleBase<{}, {}>{
4343
<div className='control-section'>
4444
<div className='content-wrapper' style={{ marginBottom: '25px' }}>
4545
<form id='htmlFormId' className='htmlForm-horizontal'>
46-
<div className='e-float-input'>
47-
<input type='text' id='required' name='Required' required />
48-
<span className='e-float-line'></span>
49-
<label className='e-float-text' htmlFor='required'>Required</label>
50-
</div>
51-
<div className='e-float-input'>
52-
<input type='text' id='email' name='Email' required />
53-
<span className='e-float-line'></span>
54-
<label className='e-float-text' htmlFor='email'>Email</label>
55-
</div>
56-
<div className='e-float-input'>
57-
<input type='text' id='url' name='Url' required />
58-
<span className='e-float-line'></span>
59-
<label className='e-float-text' htmlFor='url'>URL</label>
60-
</div>
61-
<div className='e-float-input'>
62-
<input type='text' id='date' name='Date' required />
63-
<span className='e-float-line'></span>
64-
<label className='e-float-text' htmlFor='date'>Date</label>
65-
</div>
66-
<div className='e-float-input'>
67-
<input type='text' id='dateIso' name='DateISO' required />
68-
<span className='e-float-line'></span>
69-
<label className='e-float-text' htmlFor='dateIso'>Date ISO (YYYY-MM-DD)</label>
70-
</div>
71-
<div className='e-float-input'>
72-
<input type='text' id='number' name='Number' required />
73-
<span className='e-float-line'></span>
74-
<label className='e-float-text' htmlFor='number'>Integer or Decimal</label>
75-
</div>
76-
<div className='e-float-input'>
77-
<input type='text' id='digits' name='Digits' required />
78-
<span className='e-float-line'></span>
79-
<label className='e-float-text' htmlFor='digits'>Positive Integer</label>
80-
</div>
81-
<div className='e-float-input'>
82-
<input type='text' id='maxlen' name='MaxLength' required />
83-
<span className='e-float-line'></span>
84-
<label className='e-float-text' htmlFor='maxlen'>Maximum 5 characters</label>
85-
</div>
86-
<div className='e-float-input'>
87-
<input type='text' id='minlen' name='MinLength' required />
88-
<span className='e-float-line'></span>
89-
<label className='e-float-text' htmlFor='minlen'>Minimum 5 characters</label>
90-
</div>
91-
<div className='e-float-input'>
92-
<input type='text' id='rangelen' name='RangeLength' required />
93-
<span className='e-float-line'></span>
94-
<label className='e-float-text' htmlFor='rangelen'>Characters length between 5 to 10</label>
95-
</div>
96-
<div className='e-float-input'>
97-
<input type='text' id='range' name='Range' required />
98-
<span className='e-float-line'></span>
99-
<label className='e-float-text' htmlFor='range'>Value between 5 to 10</label>
100-
</div>
101-
<div className='e-float-input'>
102-
<input type='text' id='max' name='Max' required />
103-
<span className='e-float-line'></span>
104-
<label className='e-float-text' htmlFor='max'>Max (maximum value 5)</label>
105-
</div>
106-
<div className='e-float-input'>
107-
<input type='text' id='min' name='Min' required />
108-
<span className='e-float-line'></span>
109-
<label className='e-float-text' htmlFor='min'>Min (minimum value 5)</label>
110-
</div>
111-
<div className='e-float-input'>
112-
<input type='text' id='regex' name='Regex' required />
113-
<span className='e-float-line'></span>
114-
<label className='e-float-text' htmlFor='regex'>Regex (accepts alphabets only)</label>
115-
</div>
116-
<div className='e-float-input'>
117-
<input type='text' id='custom' name='Custom' required />
118-
<span className='e-float-line'></span>
119-
<label className='e-float-text' htmlFor='custom'>Custom Function (maximum 5 characters)</label>
46+
<div className='form-group'>
47+
<div className='e-float-input'>
48+
<input type='text' id='required' name='Required' data-msg-containerid='requiredError' />
49+
<span className='e-float-line'></span>
50+
<label className='e-float-text' htmlFor='required'>Required</label>
51+
</div>
52+
<div id='requiredError'></div>
53+
</div>
54+
<div className='form-group'>
55+
<div className='e-float-input'>
56+
<input type='text' id='email' name='Email' data-msg-containerid='emailError' />
57+
<span className='e-float-line'></span>
58+
<label className='e-float-text' htmlFor='email'>Email</label>
59+
</div>
60+
<div id='emailError'></div>
61+
</div>
62+
<div className='form-group'>
63+
<div className='e-float-input'>
64+
<input type='text' id='url' name='Url' data-msg-containerid='urlError' />
65+
<span className='e-float-line'></span>
66+
<label className='e-float-text' htmlFor='url'>URL</label>
67+
</div>
68+
<div id='urlError'></div>
69+
</div>
70+
<div className='form-group'>
71+
<div className='e-float-input'>
72+
<input type='text' id='date' name='Date' data-msg-containerid='dateError' />
73+
<span className='e-float-line'></span>
74+
<label className='e-float-text' htmlFor='date'>Date</label>
75+
</div>
76+
<div id='dateError'></div>
77+
</div>
78+
<div className='form-group'>
79+
<div className='e-float-input'>
80+
<input type='text' id='dateIso' name='DateISO' data-msg-containerid='dateisoError' />
81+
<span className='e-float-line'></span>
82+
<label className='e-float-text' htmlFor='dateIso'>Date ISO (YYYY-MM-DD)</label>
83+
</div>
84+
<div id='dateisoError'></div>
85+
</div>
86+
<div className='form-group'>
87+
<div className='e-float-input'>
88+
<input type='text' id='number' name='Number' data-msg-containerid='numberError' />
89+
<span className='e-float-line'></span>
90+
<label className='e-float-text' htmlFor='number'>Integer or Decimal</label>
91+
</div>
92+
<div id='numberError'></div>
93+
</div>
94+
<div className='form-group'>
95+
<div className='e-float-input'>
96+
<input type='text' id='digits' name='Digits' data-msg-containerid='digitError' />
97+
<span className='e-float-line'></span>
98+
<label className='e-float-text' htmlFor='digits'>Positive Integer</label>
99+
</div>
100+
<div id='digitError'></div>
101+
</div>
102+
<div className='form-group'>
103+
<div className='e-float-input'>
104+
<input type='text' id='maxlen' name='MaxLength' data-msg-containerid='maxlenError' />
105+
<span className='e-float-line'></span>
106+
<label className='e-float-text' htmlFor='maxlen'>Maximum 5 characters</label>
107+
</div>
108+
<div id='maxlenError'></div>
109+
</div>
110+
<div className='form-group'>
111+
<div className='e-float-input'>
112+
<input type='text' id='minlen' name='MinLength' data-msg-containerid='minlenError' />
113+
<span className='e-float-line'></span>
114+
<label className='e-float-text' htmlFor='minlen'>Minimum 5 characters</label>
115+
</div>
116+
<div id='minlenError'></div>
117+
</div>
118+
<div className='form-group'>
119+
<div className='e-float-input'>
120+
<input type='text' id='rangelen' name='RangeLength' data-msg-containerid='rangelenError' />
121+
<span className='e-float-line'></span>
122+
<label className='e-float-text' htmlFor='rangelen'>Characters length between 5 to 10</label>
123+
</div>
124+
<div id='rangelenError'></div>
125+
</div>
126+
<div className='form-group'>
127+
<div className='e-float-input'>
128+
<input type='text' id='range' name='Range' data-msg-containerid='rangeError' />
129+
<span className='e-float-line'></span>
130+
<label className='e-float-text' htmlFor='range'>Value between 5 to 10</label>
131+
</div>
132+
<div id='rangeError'></div>
133+
</div>
134+
<div className='form-group'>
135+
<div className='e-float-input'>
136+
<input type='text' id='max' name='Max' data-msg-containerid='maxError' />
137+
<span className='e-float-line'></span>
138+
<label className='e-float-text' htmlFor='max'>Max (maximum value 5)</label>
139+
</div>
140+
<div id='maxError'></div>
141+
</div>
142+
<div className='form-group'>
143+
<div className='e-float-input'>
144+
<input type='text' id='min' name='Min' data-msg-containerid='minError' />
145+
<span className='e-float-line'></span>
146+
<label className='e-float-text' htmlFor='min'>Min (minimum value 5)</label>
147+
</div>
148+
<div id='minError'></div>
149+
</div>
150+
<div className='form-group'>
151+
<div className='e-float-input'>
152+
<input type='text' id='regex' name='Regex' data-msg-containerid='regexError' />
153+
<span className='e-float-line'></span>
154+
<label className='e-float-text' htmlFor='regex'>Regex (accepts alphabets only)</label>
155+
</div>
156+
<div id="regexError"></div>
157+
</div>
158+
<div className='form-group'>
159+
<div className='e-float-input'>
160+
<input type='text' id='custom' name='Custom' data-msg-containerid='customError' />
161+
<span className='e-float-line'></span>
162+
<label className='e-float-text' htmlFor='custom'>Custom Function (maximum 5 characters)</label>
163+
</div>
164+
<div id='customError'></div>
120165
</div>
121166
<div className='row'>
122167
<div style={{ float: 'left', margin: '0 10% 0 30%' }}>

0 commit comments

Comments
 (0)