<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input name="gender" type="hidden">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input name="password" type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input name="terms" type="checkbox">
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui reset button">Reset</div>
<div class="ui clear button">Clear</div>
</form>
$('.ui.form')
.form({
inline: true,
on: 'blur',
fields: {
name: {
identifier: 'name',
rules: [
{
type: 'empty',
prompt: 'Please enter your name'
}
]
},
skills: {
identifier: 'skills',
rules: [
{
type: 'minCount[2]',
prompt: 'Please select at least two skills'
}
]
},
gender: {
identifier: 'gender',
rules: [
{
type: 'empty',
prompt: 'Please select a gender'
}
]
},
username: {
identifier: 'username',
rules: [
{
type: 'empty',
prompt: 'Please enter a username'
}
]
},
password: {
identifier: 'password',
rules: [
{
type: 'empty',
prompt: 'Please enter a password'
},
{
type: 'minLength[6]',
prompt: 'Your password must be at least {ruleValue} characters'
}
]
},
terms: {
identifier: 'terms',
rules: [
{
type: 'checked',
prompt: 'You must agree to the terms and conditions'
}
]
}
}
})
;
Xem thêm về validation tại đây :
Link