0
# Form Validation
1

2
Comprehensive form validation system with built-in rules, custom validation support, and detailed error reporting for creating robust user input handling.
3

4
## Capabilities
5

6
### Form Validation
7

8
Complete form validation with field rules, error display, and submission handling.
9

10
```javascript { .api }
11
/**
12
 * Initialize form validation on elements
13
 * @param settings - Configuration object for form validation behavior
14
 */
15
$('.ui.form').form(settings);
16

17
interface FormSettings {
18
  // Validation
19
  fields: { [fieldName: string]: FieldValidation };  // Field validation rules
20
  rules: { [ruleName: string]: ValidationRule };     // Custom validation rules
21
  prompts: { [ruleName: string]: string };          // Custom error messages
22
  
23
  // Behavior
24
  on: 'blur' | 'change' | 'submit';      // When to validate
25
  revalidate: boolean;                   // Revalidate on input after error
26
  delay: boolean;                        // Delay validation on input
27
  inline: boolean;                       // Show errors inline with fields
28
  transition: string;                    // Error message transition
29
  duration: number;                      // Transition duration (ms)
30
  
31
  // Display
32
  keyboardShortcuts: boolean;            // Enable keyboard shortcuts
33
  
34
  // Callbacks
35
  onValid: () => void;                   // When form becomes valid
36
  onInvalid: () => void;                 // When form becomes invalid
37
  onSuccess: (event: Event, fields: any) => void; // On successful validation
38
  onFailure: (formErrors: string[], fields: any) => void; // On validation failure
39
}
40

41
interface FieldValidation {
42
  identifier: string;                    // Field identifier
43
  rules: ValidationRule[];               // Array of validation rules
44
  optional?: boolean;                    // Field is optional
45
  depends?: string;                      // Field depends on another field
46
}
47

48
interface ValidationRule {
49
  type: string;                          // Rule type
50
  prompt?: string;                       // Custom error message
51
  value?: any;                          // Rule parameter value
52
}
53
```
54

55
**Form Methods:**
56

57
```javascript { .api }
58
// Validation
59
$('.ui.form').form('validate form');
60
$('.ui.form').form('validate field', identifier);
61
$('.ui.form').form('is valid');
62
$('.ui.form').form('is invalid');
63

64
// Error management
65
$('.ui.form').form('add errors', errors);
66
$('.ui.form').form('remove errors');
67
$('.ui.form').form('add field error', identifier, errors);
68
$('.ui.form').form('remove field error', identifier);
69

70
// Field values
71
$('.ui.form').form('get field', identifier);
72
$('.ui.form').form('get fields', identifiers);
73
$('.ui.form').form('get values');
74
$('.ui.form').form('set value', identifier, value);
75
$('.ui.form').form('set values', values);
76

77
// State management  
78
$('.ui.form').form('submit');
79
$('.ui.form').form('reset');
80
$('.ui.form').form('clear');
81
```
82

83
**Built-in Validation Rules:**
84

85
```javascript { .api }
86
// Basic rules
87
{ type: 'empty', prompt: 'Please enter a value' }
88
{ type: 'length[6]', prompt: 'Must be at least 6 characters' }
89
{ type: 'minLength[2]', prompt: 'Must be at least 2 characters' }
90
{ type: 'maxLength[10]', prompt: 'Must be 10 characters or less' }
91
{ type: 'exactLength[5]', prompt: 'Must be exactly 5 characters' }
92

93
// Format validation
94
{ type: 'email', prompt: 'Please enter a valid email' }
95
{ type: 'url', prompt: 'Please enter a valid URL' }
96
{ type: 'regExp[/^[a-zA-Z]+$/]', prompt: 'Must contain only letters' }
97

98
// Numeric validation
99
{ type: 'integer', prompt: 'Must be an integer' }
100
{ type: 'decimal', prompt: 'Must be a decimal number' }
101
{ type: 'number', prompt: 'Must be a number' }
102
{ type: 'minValue[0]', prompt: 'Must be at least 0' }
103
{ type: 'maxValue[100]', prompt: 'Must be 100 or less' }
104

105
// Comparison rules
106
{ type: 'match[password]', prompt: 'Must match password field' }
107
{ type: 'different[username]', prompt: 'Must be different from username' }
108
{ type: 'creditCard', prompt: 'Must be a valid credit card number' }
109

110
// Selection rules
111
{ type: 'minCount[2]', prompt: 'Must select at least 2 options' }
112
{ type: 'exactCount[3]', prompt: 'Must select exactly 3 options' }
113
{ type: 'maxCount[5]', prompt: 'Must select 5 or fewer options' }
114

115
// Date validation
116
{ type: 'date', prompt: 'Must be a valid date' }
117
{ type: 'dateRange[mm/dd/yyyy..mm/dd/yyyy]', prompt: 'Must be in date range' }
118

119
// Conditional validation
120
{ type: 'checked', prompt: 'Must be checked' }
121
{ type: 'contains[value]', prompt: 'Must contain specified value' }
122
{ type: 'containsExactly[value]', prompt: 'Must contain exactly specified value' }
123
{ type: 'doesntContain[value]', prompt: 'Must not contain specified value' }
124
```
125

126
**Usage Examples:**
127

128
```html
129
<!-- Basic form validation -->
130
<form class="ui form">
131
  <div class="field">
132
    <label>Email</label>
133
    <input type="email" name="email" placeholder="Enter your email">
134
  </div>
135
  <div class="field">
136
    <label>Password</label>
137
    <input type="password" name="password" placeholder="Enter password">
138
  </div>
139
  <div class="field">
140
    <label>Confirm Password</label>
141
    <input type="password" name="confirmPassword" placeholder="Confirm password">
142
  </div>
143
  <div class="ui submit button">Submit</div>
144
  <div class="ui error message"></div>
145
</form>
146

147
<script>
148
$('.ui.form').form({
149
  fields: {
150
    email: {
151
      identifier: 'email',
152
      rules: [
153
        { type: 'empty', prompt: 'Please enter your email' },
154
        { type: 'email', prompt: 'Please enter a valid email' }
155
      ]
156
    },
157
    password: {
158
      identifier: 'password',
159
      rules: [
160
        { type: 'empty', prompt: 'Please enter a password' },
161
        { type: 'minLength[6]', prompt: 'Password must be at least 6 characters' }
162
      ]
163
    },
164
    confirmPassword: {
165
      identifier: 'confirmPassword',
166
      rules: [
167
        { type: 'empty', prompt: 'Please confirm your password' },
168
        { type: 'match[password]', prompt: 'Passwords must match' }
169
      ]
170
    }
171
  }
172
});
173
</script>
174
```
175

176
### Custom Validation Rules
177

178
Create custom validation rules for specific business logic requirements.
179

180
```javascript { .api }
181
/**
182
 * Add custom validation rule
183
 * @param ruleName - Name of the custom rule
184
 * @param ruleFunction - Function that performs validation
185
 */
186
$.fn.form.settings.rules[ruleName] = function(value, parameter) {
187
  // Return true if valid, false if invalid
188
  return boolean;
189
};
190

191
// Custom rule with parameter
192
$.fn.form.settings.rules.customRule = function(value, parameter) {
193
  // parameter contains the value passed in brackets
194
  return value.length >= parseInt(parameter);
195
};
196
```
197

198
**Custom Rule Examples:**
199

200
```javascript { .api }
201
// Phone number validation
202
$.fn.form.settings.rules.phone = function(value) {
203
  return /^\d{3}-\d{3}-\d{4}$/.test(value);
204
};
205

206
// Strong password validation
207
$.fn.form.settings.rules.strongPassword = function(value) {
208
  return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/.test(value);
209
};
210

211
// Age validation
212
$.fn.form.settings.rules.validAge = function(value, range) {
213
  var age = parseInt(value);
214
  var [min, max] = range.split('-').map(n => parseInt(n));
215
  return age >= min && age <= max;
216
};
217

218
// Usage in form validation
219
$('.ui.form').form({
220
  fields: {
221
    phone: {
222
      identifier: 'phone',
223
      rules: [
224
        { type: 'phone', prompt: 'Please enter a valid phone number (XXX-XXX-XXXX)' }
225
      ]
226
    },
227
    password: {
228
      identifier: 'password', 
229
      rules: [
230
        { type: 'strongPassword', prompt: 'Password must contain uppercase, lowercase, number and special character' }
231
      ]
232
    },
233
    age: {
234
      identifier: 'age',
235
      rules: [
236
        { type: 'validAge[18-120]', prompt: 'Age must be between 18 and 120' }
237
      ]
238
    }
239
  }
240
});
241
```
242

243
### Conditional Validation
244

245
Implement conditional validation based on other field values or form state.
246

247
```javascript { .api }
248
// Conditional field validation
249
{
250
  identifier: 'fieldName',
251
  depends: 'otherField',                   // Only validate if other field has value
252
  rules: [
253
    { type: 'empty', prompt: 'This field is required when other field is filled' }
254
  ]
255
}
256

257
// Custom conditional validation
258
$.fn.form.settings.rules.conditionalRequired = function(value, parameter) {
259
  var dependentFieldValue = $('[name="' + parameter + '"]').val();
260
  if (dependentFieldValue) {
261
    return value.length > 0;
262
  }
263
  return true; // Not required if dependent field is empty
264
};
265
```
266

267
**Conditional Validation Examples:**
268

269
```html
270
<!-- Conditional validation form -->
271
<form class="ui form">
272
  <div class="field">
273
    <label>Account Type</label>
274
    <select name="accountType" class="ui dropdown">
275
      <option value="">Select Type</option>
276
      <option value="business">Business</option>
277
      <option value="personal">Personal</option>
278
    </select>
279
  </div>
280
  <div class="field">
281
    <label>Company Name</label>
282
    <input type="text" name="companyName" placeholder="Required for business accounts">
283
  </div>
284
  <div class="field">
285
    <label>Tax ID</label>
286
    <input type="text" name="taxId" placeholder="Required for business accounts">
287
  </div>
288
</form>
289

290
<script>
291
// Custom conditional rule
292
$.fn.form.settings.rules.requiredForBusiness = function(value) {
293
  var accountType = $('[name="accountType"]').val();
294
  if (accountType === 'business') {
295
    return value.length > 0;
296
  }
297
  return true;
298
};
299

300
$('.ui.form').form({
301
  fields: {
302
    accountType: {
303
      identifier: 'accountType',
304
      rules: [
305
        { type: 'empty', prompt: 'Please select account type' }
306
      ]
307
    },
308
    companyName: {
309
      identifier: 'companyName',
310
      rules: [
311
        { type: 'requiredForBusiness', prompt: 'Company name is required for business accounts' }
312
      ]
313
    },
314
    taxId: {
315
      identifier: 'taxId', 
316
      rules: [
317
        { type: 'requiredForBusiness', prompt: 'Tax ID is required for business accounts' }
318
      ]
319
    }
320
  }
321
});
322
</script>
323
```
324

325
### Inline Field Validation
326

327
Real-time validation with inline error display for individual fields.
328

329
```javascript { .api }
330
// Form with inline validation
331
$('.ui.form').form({
332
  inline: true,                          // Enable inline validation
333
  on: 'blur',                           // Validate on field blur
334
  revalidate: true,                     // Revalidate on input after error
335
  
336
  fields: {
337
    email: {
338
      identifier: 'email',
339
      rules: [
340
        { type: 'email', prompt: 'Enter a valid email address' }
341
      ]
342
    }
343
  }
344
});
345
```
346

347
**Real-time Validation Example:**
348

349
```html
350
<!-- Form with inline validation -->
351
<form class="ui form">
352
  <div class="field">
353
    <label>Username</label>
354
    <input type="text" name="username" placeholder="Choose a username">
355
  </div>
356
  <div class="field">
357
    <label>Email</label>
358
    <input type="email" name="email" placeholder="Enter your email">
359
  </div>
360
  <div class="ui submit button">Register</div>
361
</form>
362

363
<script>
364
$('.ui.form').form({
365
  inline: true,
366
  on: 'blur',
367
  revalidate: true,
368
  fields: {
369
    username: {
370
      identifier: 'username',
371
      rules: [
372
        { type: 'empty', prompt: 'Username is required' },
373
        { type: 'minLength[3]', prompt: 'Username must be at least 3 characters' },
374
        { type: 'regExp[/^[a-zA-Z0-9_]+$/]', prompt: 'Username can only contain letters, numbers, and underscores' }
375
      ]
376
    },
377
    email: {
378
      identifier: 'email',
379
      rules: [
380
        { type: 'empty', prompt: 'Email is required' },
381
        { type: 'email', prompt: 'Please enter a valid email address' }
382
      ]
383
    }
384
  },
385
  onSuccess: function(event, fields) {
386
    console.log('Form submitted successfully', fields);
387
    return false; // Prevent actual form submission for demo
388
  }
389
});
390
</script>
391
```
392

393
## Validation Patterns
394

395
### Error Message Customization
396
Customize error messages for better user experience:
397
```javascript { .api }
398
prompts: {
399
  empty: '{name} is required',
400
  email: '{name} must be a valid email address',
401
  minLength: '{name} must be at least {ruleValue} characters'
402
}
403
```
404

405
### Field Dependencies
406
Set up field dependencies for conditional validation:
407
```javascript { .api }
408
{
409
  identifier: 'confirmEmail',
410
  depends: 'email',
411
  rules: [
412
    { type: 'match[email]', prompt: 'Email addresses must match' }
413
  ]
414
}
415
```
416

417
### Async Validation
418
Implement server-side validation checks:
419
```javascript { .api }
420
$.fn.form.settings.rules.uniqueUsername = function(value, identifier, $module) {
421
  var isValid = false;
422
  $.ajax({
423
    url: '/check-username',
424
    data: { username: value },
425
    async: false,
426
    success: function(response) {
427
      isValid = response.available;
428
    }
429
  });
430
  return isValid;
431
};
432
```