<p>Form validation requires passing in a validation object with the rules required to validate your form.</p>
<div class="ui ignored info message">
A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the <code>id</code> tag, <code>name</code> tag, or the <code>data-validate</code> metadata matching the identifier provided in the settings object.
A validation object includes a list of form elements, and rules to validate each field against. Fields are matched by either the <code>id</code>, <code>name</code>, or <code>data-validate</code> property matching the identifier specified in the settings object.
prompt : 'Your password must be at least 6 characters'
prompt : 'Your password must be at least {ruleValue} characters'
}
]
},
terms: {
identifier: 'terms',
identifier: 'terms',
rules: [
{
type : 'checked',
@ -146,6 +161,102 @@ type : 'UI Behavior'
</div>
</form>
<div class="prompt example">
<h4 class="ui header">Customizing Prompts</h4>
<p>Form validation includes default error prompts for most cases, however these can be quite generic. To specify custom personalized values for a validation prompt use the <code>prompt</code> property with a rule.</p>
<div class="ui ignored info message">You can set default messages for each validation rule type by modifying <code>$fn.form.settings.prompt</code></div>
<p>Prompt also supports custom templating with the following values replaced</p>
<td>The current text of a field's label, or if no label available its placeholder text</td>
</tr>
<tr>
<td class="four wide"><b>{identifier}</b></td>
<td>The identifier used to match the field</td>
</tr>
<tr>
<td class="four wide"><b>{value}</b></td>
<td>The current field value</td>
</tr>
<tr>
<td class="four wide"><b>{ruleValue}</b></td>
<td>The value passed to a rule, for example <code>minLength[100]</code> would set this value to 100</td>
</tr>
</tbody>
</table>
<div class="ignored code">
$('.ui.form')
.form({
fields: {
field1: {
rules: [
{
type : 'empty'
}
]
},
field2: {
rules: [
{
type : 'exactly[dog]',
prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}'
}
]
}
}
})
;
</div>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Field 1</label>
<input type="text" name="field1">
</div>
<div class="field">
<label>Field 2</label>
<input type="text" name="field2">
</div>
</div>
<div class="ui blue submit button">Submit</div>
<div class="ui error message">
</div>
</form>
</div>
<div class="matching example">
<h4 class="ui header">Matching Fields</h4>
<p>By default the property name used in the validation object will match against the <code>id</code>, <code>name</code>, or <code>data-validate</code> property of each input to find the corresponding field to match validation rules against.</p>
<p>If you need to specify a different identifier you can use the <code>identifier</code> property on each validation rule</p>
Jack Lukic
9 years ago