<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.
@ -154,7 +154,7 @@ type : 'UI Behavior'
<div class="ui info message">Validation rules are found in <code>$.fn.form.settings.rules</code>, to add new global validation rules, modify <code>$.fn.form.settings.rules</code> to include your function.</div>
<div class="in red message">To pass parameters to a rule, use bracket notation in your settings object. For example <code>type: 'not[dog]'</code></div>
<p>The following shows examples of validating different types of content.</p>
<h4 class="ui header">Empty</h4>
<p>The following shows examples of validating different types of empty or unchecked content.</p>
<form class="ui form">
<div class="field">
<label>Empty</label>
@ -624,9 +624,9 @@ type : 'UI Behavior'
<div class="type example">
<h4 class="ui header">Content Type</h4>
<p>Inputs can match against common content types, or your own custom regular expression.</p>
<p>Inputs can match against common content types, or your own custom <a href="http://www.regular-expressions.info/" target="_blank">regular expressions</a>.</p>
prompt : 'Please put the same value in both fields'
}
]
},
different: {
identifier : 'different2',
rules: [
{
type : 'different[different1]',
prompt : 'Please put different values for each field'
}
]
}
}
})
;
</div>
</div>
<div class="length example">
<h4 class="ui header">Length</h4>
<p>Inputs can match against length of content</p>
<form class="ui form">
<div class="field">
<label>Length</label>
<input name="length" type="text" value="12345">
</div>
<div class="field">
<label>minLength</label>
<textarea name="minLength" cols="5"></textarea>
</div>
<div class="field">
<label>maxLength</label>
<textarea name="maxLength" cols="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla metus leo, scelerisque quis pretium non, ultricies in dolor. Vivamus pulvinar odio at nisl egestas tempor. Quisque nec diam gravida, convallis massa et, aliquam purus. Nunc eget aliquet leo. Morbi sodales mi placerat volutpat rhoncus. Pellentesque sed leo eu risus rutrum suscipit ut dapibus est. Curabitur lacus diam, viverra mollis purus ut, facilisis consectetur dui. Etiam molestie suscipit ligula, vitae lacinia mi tempor ac. Pellentesque accumsan porttitor nisi. Sed ac metus ac arcu feugiat posuere. Curabitur eget pharetra felis. Donec consectetur felis sed iaculis vulputate. Sed mollis ultrices consequat.</textarea>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
<div class="evaluated code">
$('.length.example form')
.form({
on: 'blur',
fields: {
length: {
identifier : 'length',
rules: [
{
type : 'length[6]',
prompt : 'Please enter 6 characters'
}
]
},
minLength: {
identifier : 'minLength',
rules: [
{
type : 'minLength[100]',
prompt : 'Please enter at least 100 characters'
}
]
},
maxLength: {
identifier : 'maxLength',
rules: [
{
type : 'maxLength[100]',
prompt : 'Please enter at most 100 characters'
}
]
},
}
})
;
</div>
</div>
<div class="content example">
@ -813,7 +939,7 @@ type : 'UI Behavior'
</div>
<div class="multi example">
<h4 class="ui header">Multiple Selection</h4>
<h4 class="ui header">Selection Count</h4>
<p>Multiple selects can specify how many options should be allowed.</p>