Form
Form (Form 검증 동작)
Form 동작은 폼 검증(validation)을 관리하는 모듈이에요. 검증 규칙을 정의하고, 폼 값 읽기/쓰기, 오류 메시지 표시까지 폼을 다루는 데 필요한 기능을 제공해요.
출처: 문서
본문
Usage (사용법)
Specifying Validation Rules (검증 규칙 지정)
폼 검증을 사용하려면 폼을 검증하는 데 필요한 규칙이 담긴 검증 객체를 전달해야 해요.
$('.ui.form')
.form({
fields: {
name : 'notEmpty',
gender : 'notEmpty',
username : 'notEmpty',
password : ['minLength[6]', 'notEmpty'],
skills : ['minCount[2]', 'notEmpty'],
terms : 'checked'
}
})
;
or
$('.ui.form')
.form({
fields: {
name: {
identifier: 'name',
rules: [
{
type : 'notEmpty',
prompt : 'Please enter your name'
}
]
},
skills: {
identifier: 'skills',
rules: [
{
type : 'minCount[2]',
prompt : 'Please select at least two skills'
}
]
},
gender: {
identifier: 'gender',
rules: [
{
type : 'notEmpty',
prompt : 'Please select a gender'
}
]
},
username: {
identifier: 'username',
noNativeValidation: true,
rules: [
{
type : 'notEmpty',
prompt : 'Please enter a username'
}
]
},
password: {
identifier: 'password',
errorLimit: 1,
rules: [
{
type : 'notEmpty',
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'
}
]
}
}
})
;
Name (이름)
Gender (성별)
Gender (성별)
Male (남성)
Female (여성)
Username (사용자 이름)
Password (비밀번호)
Skills (기술)
Select Skills (기술 선택)
CSS
HTML
Javascript
Graphic Design (그래픽 디자인)
Plumbing (배관)
Mechanical Engineering (기계 공학)
Kitchen Repair (주방 수리)
I agree to the terms and conditions (이용약관에 동의합니다)
Submit (제출)
Passing Parameters to Rules (규칙에 매개변수 전달)
일반적으로 매개변수를 포함하는 규칙은 minLength[2]처럼 값을 대괄호 안에 넣어 작성해요.
$('.ui.form').form({
fields: {
color: {
identifier: 'color',
rules: [{
type: 'regExp',
value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i,
}]
}
}
});
Color (색상)
Submit (제출)
Customizing Prompts (프롬프트 커스터마이징)
폼 검증에는 대부분의 경우에 대한 기본 오류 프롬프트가 포함되어 있어요. 하지만 이런 기본값은 꽤 일반적이라서, 검증 프롬프트에 맞춤 값을 지정하려면 규칙에 prompt 속성을 사용해요.
you can specify prompts as a function. This may be useful when returning validation for fields that require dynamic validation messages. The functions thisArg will be set to the related field element.
{name}
The current text of a field's label, or if no label available its placeholder text ({name}: 필드 라벨의 현재 텍스트, 라벨이 없으면 placeholder 텍스트)
{identifier}
The identifier used to match the field ({identifier}: 필드를 매칭하는 데 사용되는 식별자)
{value}
The current field value ({value}: 현재 필드 값)
{ruleValue}
The value passed to a rule, for example minLength[100] would set this value to 100 ({ruleValue}: 규칙에 전달된 값, 예: minLength[100]이면 100)
$('.ui.form')
.form({
fields: {
field1: {
rules: [
{
type : 'notEmpty'
}
]
},
field2: {
rules: [
{
type : 'isExactly[dog]',
prompt : '{name} is set to "{value}" that is totally wrong. It should be {ruleValue}'
}
]
},
field3: {
rules: [
{
type : 'isExactly[cat]',
prompt : function(value) {
if(value == 'dog') {
return 'I told you to put cat, not dog!';
}
return 'That is not cat';
}
}
]
},
}
})
;
Field 1 (필드 1)
Field 2 (필드 2)
Field 3 (필드 3)
Submit (제출)
프롬프트는 함수로도 지정할 수 있어요. 동적인 검증 메시지가 필요한 필드를 검증할 때 유용해요. 함수의 thisArg는 관련 필드 요소로 설정돼요.
Matching Fields (필드 매칭)
기본적으로 검증 객체에서 사용하는 속성 이름은 각 입력의 id, name, 또는 data-validate 속성과 매칭되어 해당 필드를 찾아 검증 규칙을 적용해요.
$('.ui.form')
.form({
fields: {
name: {
identifier : 'special-name',
rules: [
{
type : 'notEmpty'
}
]
}
}
})
;
Special Field (특수 필드)
Submit (제출)
Validating Programmatically (프로그래밍 방식 검증)
Updated in 2.2.8
폼 검증은 폼 전체 또는 개별 필드를 프로그램 방식으로 검증을 트리거하고, 폼이나 개별 필드의 검증 상태를 확인하는 추가 동작을 제공해요.
validate form
Validates entire form and displays errors if necessary (폼 전체 검증, 필요 시 오류 표시)
is valid
Returns whether a form is valid (폼이 유효한지 반환)
is valid(fieldName)
Returns whether a field in a form is valid (does not update UI) (폼의 필드가 유효한지 반환, UI를 업데이트하지 않음)
validate field(fieldName)
Validates a particular field and displays errors if necessary (특정 필드 검증, 필요 시 오류 표시)
$('.ui.form')
.form({
fields: {
email: 'notEmpty',
name: 'notEmpty'
}
})
;
if( $('.ui.form').form('is valid', 'email')) {
// email is valid
}
if( $('.ui.form').form('is valid')) {
// form is valid (both email and name)
}
Native Browser Validation (브라우저 네이티브 검증)
규칙을 지정하지 않고도 브라우저에 내장된 네이티브 폼 검증을 사용할 수 있어요. 여전히 규칙을 추가로 제공할 수도 있지만, 네이티브 검증에만 완전히 의존할 수도 있어요.
$('.ui.form')
.form({
inline: true
})
;
Number (숫자)
Url
File (파일)
Submit (제출)
Rules (규칙)
Validation Rules (검증 규칙)
검증 규칙은 필드를 검증하는 데 필요한 조건들의 집합이에요.
Validation rules are found in $.fn.form.settings.rules, to add new global validation rules, modify $.fn.form.settings.rules to include your function.
To pass parameters to a rule, use bracket notation in your settings object. For example type: 'not[dog]'
Despite the global setting shouldTrim you can optionally specify to trim/not trim values before validation by adding shouldTrim:true or shouldTrim:false to each rule
Not Empty (비어 있지 않음)
notEmpty
A field is not empty (필드가 비어 있지 않음)
empty
A field is not empty (필드가 비어 있지 않음)
checked
A checkbox field is checked (체크박스 필드가 체크됨)
Content Type (콘텐츠 타입)
email
A field is a valid email address (필드가 유효한 이메일 주소임)
url
A field is a url (필드가 URL임)
integer
A field is an integer value or matches an integer range (필드가 정수 값이거나 정수 범위와 일치)
integer or integer[1..10]
decimal
A field must be a decimal number or matches a decimal range (필드가 소수이거나 소수 범위와 일치)
decimal or decimal[0.1..1.5]
number
A field is any number decimal or non-decimal or matches a number range (필드가 소수든 아니든 임의의 숫자이거나 숫자 범위와 일치)
number or number[1..10]
minValue
A field has a minimum number decimal or non-decimal (필드에 최소 숫자 소수 또는 비소수 값이 있음)
minValue[1.5]
maxValue
A field has a maximum number decimal or non-decimal (필드에 최대 숫자 소수 또는 비소수 값이 있음)
maxValue[50]
regExp[expression]
Matches against a regular expression, when using bracketed notation RegExp values must be escaped. (정규식과 일치, 대괄호 표기 시 RegExp 값을 이스케이프해야 함)
regExp[/^[a-z0-9_-]{3,16}$/gi]]
Or
regExp[/^[a-z0-9_-]{3,16}$/]]
Payment (결제)
creditCard
A field is a valid credit card (필드가 유효한 신용카드임)
creditCard
creditCard[types]
A field matches a specified array of card types (필드가 지정된 카드 타입 배열과 일치)
creditCard[visa,mastercard,unionpay]
Specified Content (지정된 콘텐츠)
contains
A field contains text (case insensitive) (필드가 텍스트를 포함, 대소문자 구분 없음)
contains[foo]
containsExactly
A field contains text (case sensitive) (필드가 텍스트를 포함, 대소문자 구분)
containsExactly[foo]
doesntContain
A field doesn't contain text (case insensitive) (필드가 텍스트를 포함하지 않음, 대소문자 구분 없음)
doesntContain[foo]
doesntContainExactly
A field doesn't contain text (case sensitive) (필드가 텍스트를 포함하지 않음, 대소문자 구분)
doesntContainExactly[foo]
is
A field is a value (case insensitive) (필드가 값과 같음, 대소문자 구분 없음)
is[foo]
isExactly
A field is a value (case-sensitive) (필드가 값과 정확히 같음, 대소문자 구분)
isExactly[foo]
not
A field is not a value (case insensitive) (필드가 값과 다름, 대소문자 구분 없음)
not[foo]
notExactly
A field is not a value (case sensitive) (필드가 값과 정확히 다름, 대소문자 구분)
notExactly[foo]
Length (길이)
minLength
A field is less than a min length (필드가 최소 길이 이상임)
minLength[5]
exactLength
A field is exactly length (필드가 정확히 그 길이임)
exactLength[16]
maxLength
A field is less than a max length (필드가 최대 길이 이하임)
maxLength[50]
size
A field has a size between min and max characters (필드 길이가 최소와 최대 문자 사이임)
size[6..12]
Matching Fields (필드 매칭)
match
A field should match the value of another validation field, for example to confirm passwords (필드가 다른 검증 필드의 값과 일치해야 함, 예: 비밀번호 확인)
match[password]
different
A field should be different than another specified field (필드가 다른 지정 필드와 달라야 함)
different[choice]
Selection Count (선택 개수)
minCount
A multiple select field contains at minimum (count) selections (다중 선택 필드에 최소 (count)개 선택이 포함됨)
minCount[count]
exactCount
A multiple select field contains exactly (count) selections (다중 선택 필드에 정확히 (count)개 선택이 포함됨)
exactCount[count]
maxCount
A multiple select field contains at maximum (count) selections (다중 선택 필드에 최대 (count)개 선택이 포함됨)
maxCount[count]
검증 규칙은 $.fn.form.settings.rules에 있습니다. 새 전역 검증 규칙을 추가하려면 $.fn.form.settings.rules에 함수를 포함하도록 수정하면 돼요. 규칙에 매개변수를 전달하려면 설정 객체에서 대괄호 표기법을 사용해요. 예: type: 'not[dog]'. 전역 설정 shouldTrim과 별개로, 각 규칙에 shouldTrim: true 또는 shouldTrim: false를 추가해 검증 전에 값을 트림할지 여부를 선택적으로 지정할 수 있어요.
Adding Custom Rules (커스텀 규칙 추가)
폼 검증을 확장해 자신만의 규칙을 추가할 수 있어요. 이 규칙들은 동기적으로 실행되어야 한다는 점을 기억하세요.
// some arbitrary business-logic
window.user = {
name : 'Simon',
adminLevel : 1
};
// custom form validation rule
$.fn.form.settings.rules.adminLevel = function(value, adminLevel) {
return (window.user.adminLevel >= adminLevel)
};
$('.ui.form')
.form({
fields: {
dog: {
identifier: 'dog',
rules: [
{
type: 'adminLevel[2]',
prompt: 'You must be at least a level-2 admin to add a dog'
}
]
}
}
})
;
Dog (개)
Add Dog (개 추가)
Built-in Events (내장 이벤트)
폼은 특별히 라벨이 붙은 폼 필드에 이벤트를 자동으로 연결해요.
Fields will blur on escape key press
Fields will submit form on enter
Submit events will be attached to click on any element inside the form with class submit
Reset events will be attached to click on any element inside the form with class reset
Clear events will be attached to click on any element inside the form with class clear
Test Field (테스트 필드)
Submit (제출)
Reset (재설정)
Clear (지우기)
필드는 escape 키를 누르면 blur되고 enter 키를 누르면 폼을 제출해요. submit 클래스가 있는 폼 내부 요소 클릭에는 Submit 이벤트가, reset 클래스 요소 클릭에는 Reset 이벤트가, clear 클래스 요소 클릭에는 Clear 이벤트가 연결돼요.
Manipulating Forms (폼 조작)
Reset / Clear Fields (필드 리셋/지우기)
$('form').form('reset')를 호출하거나 아무 reset 요소를 클릭하면 모든 폼 값을 기본값으로 되돌려요. 이 기본값은 페이지 로드 시점에 폼 필드에 설정되어 있던 값이에요.
Name (이름)
Gender (성별)
Gender (성별)
Male (남성)
Female (여성)
Username (사용자 이름)
Password (비밀번호)
I agree to the terms and conditions (이용약관에 동의합니다)
Submit (제출)
Reset (재설정)
Clear (지우기)
Writing Values (값 쓰기)
Form에는 폼 필드의 값을 읽고 쓰는 동작이 포함되어 있어요.
$('.writing.example form')
// set one value
.form('set value', 'name', 'Jack')
// set several values
.form('set values', {
name : 'Jack',
gender : 'male',
colors : ['red', 'grey'],
username : 'jlukic',
password : 'youdliketoknow',
terms : true
})
;
Name (이름)
Gender (성별)
Gender (성별)
Male (남성)
Female (여성)
Username (사용자 이름)
Password (비밀번호)
Favorite Colors (좋아하는 색상)
Red
Blue
Green
Grey
I agree to the terms and conditions (이용약관에 동의합니다)
Submit (제출)
Clear (지우기)
Getting Values (값 읽기)
get value와 get values를 사용해 폼 필드의 값을 읽을 수도 있어요.
var
$form = $('.get.example form'),
// get one value
colors = $form.form('get value', 'colors'),
// get list of values
fields = $form.form('get values', ['name', 'colors']),
// get all values
allFields = $form.form('get values')
;
console.log(colors);
console.log(fields);
console.log(allFields);
Name (이름)
Gender (성별)
Gender (성별)
Male (남성)
Female (여성)
Username (사용자 이름)
Password (비밀번호)
Favorite Colors (좋아하는 색상)
Red
Blue
Green
Grey
I agree to the terms and conditions (이용약관에 동의합니다)
Submit (제출)
Rule Examples (규칙 예제)
Empty (비어 있음)
다양한 유형의 빈 콘텐츠나 체크되지 않은 콘텐츠를 검증하는 예제를 보여줘요.
Empty (비어 있음)
Dropdown
Select (선택)
Choice 1 (선택 1)
Choice 2 (선택 2)
Checkbox (체크박스)
Submit (제출)
$('.field.example form')
.form({
on: 'blur',
fields: {
empty: {
identifier : 'empty',
rules: [
{
type : 'notEmpty',
prompt : 'Please enter a value'
}
]
},
dropdown: {
identifier : 'dropdown',
rules: [
{
type : 'notEmpty',
prompt : 'Please select a dropdown value'
}
]
},
checkbox: {
identifier : 'checkbox',
rules: [
{
type : 'checked',
prompt : 'Please check the checkbox'
}
]
}
}
})
;
Content Type (콘텐츠 타입)
입력은 일반적인 콘텐츠 타입이나 자신만의 커스텀 정규식과 매칭할 수 있어요.
Integer (정수)
E-mail
Decimal (소수)
Number (숫자)
URL
RegEx
Submit (제출)
$('.type.example form')
.form({
on: 'blur',
fields: {
integer: {
identifier : 'integer',
rules: [
{
type : 'integer[1..100]',
prompt : 'Please enter an integer value'
}
]
},
decimal: {
identifier : 'decimal',
rules: [
{
type : 'decimal',
prompt : 'Please enter a valid decimal'
}
]
},
number: {
identifier : 'number',
rules: [
{
type : 'number',
prompt : 'Please enter a valid number'
}
]
},
email: {
identifier : 'email',
rules: [
{
type : 'email',
prompt : 'Please enter a valid e-mail'
}
]
},
url: {
identifier : 'url',
rules: [
{
type : 'url',
prompt : 'Please enter a url'
}
]
},
regex: {
identifier : 'regex',
rules: [
{
type : 'regExp[/^[a-z0-9_-]{4,16}$/]',
prompt : 'Please enter a 4-16 letter username'
}
]
}
}
})
;
Payment (결제)
입력은 신용카드와 기타 결제 유형을 검증할 수 있어요.
Card Name (카드 이름)
Validation Name (검증 이름)
Test Card Number (테스트 카드 번호)
Visa
visa
4565340519181845
American Express
amex
378282246310005
Mastercard
mastercard
5200828282828210
Discover
discover
6011111111111117
Unionpay
unionpay
6240008631401148
JCB
jcb
3530111333300000
Diner's Club
dinersClub
38520000023237
Maestro
maestro
6799990100000000019
Laser
laser
630490017740292441
Visa Electron
visaElectron
4917300800000000
Credit Card (신용카드)
Certain Type (특정 타입)
Submit (제출)
$('.payment.example form')
.form({
on: 'blur',
fields: {
card: {
identifier : 'card',
rules: [
{
type : 'creditCard',
prompt : 'Please enter a valid credit card'
}
]
},
exactCard: {
identifier : 'exact-card',
rules: [
{
type : 'creditCard[visa,amex]',
prompt : 'Please enter a visa or amex card'
}
]
}
}
})
;
Matching other Fields (다른 필드 매칭)
필드는 다른 필드와 일치하거나 일치하지 않도록 요구할 수 있어요. 선택(optional) 필드와 함께 사용하면 좋아요.
Match 1
Match 2
Different 1
Different 2
Submit (제출)
$('.match.example form')
.form({
on: 'blur',
fields: {
match: {
identifier : 'match2',
rules: [
{
type : 'match[match1]',
prompt : 'Please put the same value in both fields'
}
]
},
different: {
identifier : 'different2',
rules: [
{
type : 'different[different1]',
prompt : 'Please put different values for each field'
}
]
}
}
})
;
Length (길이)
입력은 콘텐츠의 길이와 매칭할 수 있어요.
minLength
Exact Length (정확한 길이)
maxLength
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.
Submit (제출)
$('.length.example form')
.form({
on: 'blur',
fields: {
minLength: {
identifier : 'minLength',
rules: [
{
type : 'minLength[100]',
prompt : 'Please enter at least 100 characters'
}
]
},
exactLength: {
identifier : 'exactLength',
rules: [
{
type : 'exactLength[6]',
prompt : 'Please enter exactly 6 characters'
}
]
},
maxLength: {
identifier : 'maxLength',
rules: [
{
type : 'maxLength[100]',
prompt : 'Please enter at most 100 characters'
}
]
},
}
})
;
Specified Content (지정된 콘텐츠)
검증 규칙은 입력 안에 있어야 하거나 없어야 하는 콘텐츠를 지정할 수 있어요.
is
isExactly
not
notExactly
contains
containsExactly
doesntContain
doesntContainExactly
Submit (제출)
$('.content.example form')
.form({
on: 'blur',
fields: {
is: {
identifier : 'is',
rules: [
{
type : 'is[dog]',
prompt : 'Please enter exactly "dog"'
}
]
},
isExactly: {
identifier : 'isExactly',
rules: [
{
type : 'isExactly[dog]',
prompt : 'Please enter exactly "dog"'
}
]
},
not: {
identifier : 'not',
rules: [
{
type : 'not[dog]',
prompt : 'Please enter a value, but not "dog"'
}
]
},
notExactly: {
identifier : 'notExactly',
rules: [
{
type : 'notExactly[dog]',
prompt : 'Please enter a value, but not exactly "dog"'
}
]
},
contains: {
identifier : 'contains',
rules: [
{
type : 'contains[dog]',
prompt : 'Please enter a value containing "dog"'
}
]
},
containsExactly: {
identifier : 'containsExactly',
rules: [
{
type : 'containsExactly[dog]',
prompt : 'Please enter a value containing exactly "dog"'
}
]
},
doesntContain: {
identifier : 'doesntContain',
rules: [
{
type : 'doesntContain[dog]',
prompt : 'Please enter a value not containing "dog"'
}
]
},
doesntContainExactly: {
identifier : 'doesntContainExactly',
rules: [
{
type : 'doesntContainExactly[dog]',
prompt : 'Please enter a value not containing exactly "dog"'
}
]
}
}
})
;
Selection Count (선택 개수)
다중 선택 입력은 허용할 옵션 개수를 지정할 수 있어요.
Exact Count (정확한 개수)
Select Values (값 선택)
1
2
3
4
5
Minimum Count (최소 개수)
Select Values (값 선택)
1
2
3
4
5
Maximum Count (최대 개수)
Select Values (값 선택)
1
2
3
4
5
Submit (제출)
$('.multi.example form')
.form({
on: 'blur',
fields: {
minCount: {
identifier : 'minCount',
rules: [
{
type : 'minCount[2]',
prompt : 'Please select at least 2 values'
}
]
},
maxCount: {
identifier : 'maxCount',
rules: [
{
type : 'maxCount[2]',
prompt : 'Please select a max of 2 values'
}
]
},
exactCount: {
identifier : 'exactCount',
rules: [
{
type : 'exactCount[2]',
prompt : 'Please select 2 values'
}
]
}
}
})
Form Examples (폼 예제)
Adding Rules Programmatically (규칙을 프로그램 방식으로 추가)
add field/rule, remove rule, remove field 같은 특별한 동작으로 필드나 규칙을 동적으로 추가/제거할 수 있어요.
You can specify shorthand or full rule objects when adding rules. You can also specify fields as an array to modify multiple fields..
// lets only validate username to start
$('.add.example .ui.form')
.form({
fields: {
username: ['notEmpty', 'minLength[5]']
}
})
;
// lets toggle some validation based on button
$('.add.example .ui.positive.button')
.on('click', function() {
$('.add.example .ui.form')
// adding longform
.form('add rule', 'gender', {
rules: [
{
type : 'notEmpty',
prompt : 'Entering your gender is necessary'
}
]
})
// adding shorthand
.form('add rule', 'password', ['notEmpty', 'minLength[5]'])
;
})
;
$('.add.example .ui.negative.button')
.on('click', function() {
$('.add.example .ui.form')
// removing multiple at once
.form('remove fields', ['gender', 'password'])
;
})
;
Add Additional Validation (추가 검증 추가)
Remove Additional Validation (추가 검증 제거)
Username (사용자 이름)
Password (비밀번호)
Gender (성별)
Gender (성별)
Male (남성)
Female (여성)
Submit (제출)
Clear (지우기)
규칙을 추가할 때 축약형이나 전체 규칙 객체를 지정할 수 있어요. 또한 필드를 배열로 지정해 여러 필드를 한 번에 수정할 수도 있어요.
Validating Dropdowns (드롭다운 검증)
드롭다운도 다른 폼 필드처럼 검증할 수 있어요. 드롭다운과 연결된 input이나 select에 검증 규칙을 매칭하기만 하면 돼요.
$('.ui.dropdown')
.dropdown()
;
$('.ui.form')
.form({
fields: {
gender: 'notEmpty',
name: 'notEmpty'
}
})
;
Name (이름)
Gender (성별)
Gender (성별)
Male (남성)
Female (여성)
Submit (제출)
Using Server Name Attributes (서버 name 속성 사용)
때로는 통합 때문에 name이나 id에 특정 값을 사용해야 할 수 있어요. 그런 경우 data-validate 속성으로 폼 필드를 매칭할 수 있어요.
$('.ui.form')
.form(
fields: {
name: 'notEmpty'
}
)
;
Name (이름)
Submit (제출)
Dependent Fields (종속 필드)
특정 필드가 있을 때만 사용되는 검증 필드를 지정할 수 있어요. 이 규칙을 평가하려면 반드시 비어 있지 않아야 하는 필드의 ID를 depends: 'identifier'로 지정하면 돼요.
$('.ui.form')
.form({
fields: {
yearsPracticed: {
identifier : 'yearsPracticed',
depends : 'isDoctor',
rules : [
{
type : 'notEmpty',
prompt : 'Please enter the number of years you have been a doctor'
}
]
}
}
})
;
Are you a doctor? (당신은 의사인가요?)
How long have you been a medical professional (의료 전문가로 일한 지 얼마나 됐나요?)
Submit (제출)
Optional Fields (선택 필드)
optional: true 매개변수를 추가하면 필드가 비어 있지 않을 때만 검증 규칙을 적용해요.
$('.ui.form')
.form({
fields: {
email: {
identifier : 'email',
rules: [
{
type : 'email',
prompt : 'Please enter a valid e-mail'
}
]
},
ccEmail: {
identifier : 'cc-email',
optional : true,
rules: [
{
type : 'email',
prompt : 'Please enter a valid second e-mail'
}
]
}
}
})
;
Your tickets are all ready to print. Where would you like to send a receipt? (티켓이 모두 출력 준비됐어요. 영수증을 어디로 보낼까요?)
E-mail
Additional E-mail (추가 이메일)
Submit (제출)
Setting Site Defaults (사이트 기본값 설정)
$.fn.form.settings.defaults를 수정하면 사이트 전체 검증 설정을 지정할 수 있어요. 해당 필드가 폼에 나타나면 모든 폼 검증에 적용돼요.
$.fn.form.settings.defaults = {
email: {
identifier : 'email',
rules: [
{
type : 'email',
prompt : 'Please enter a valid e-mail'
}
]
},
// this form doesn't have a cc email but it will not produce an error
ccEmail: {
identifier : 'cc-email',
optional : true,
rules: [
{
type : 'email',
prompt : 'Please enter a valid second e-mail'
}
]
},
};
Your tickets are all ready to print. Where would you like to send a receipt? (티켓이 모두 출력 준비됐어요. 영수증을 어디로 보낼까요?)
E-mail
Submit (제출)
Displaying Error Messages (오류 메시지 표시)
ui message error 블록을 포함한 폼은 자동으로 폼 검증 정보로 채워져요.
First Name (이름)
Last Name (성)
Username (사용자 이름)
Password (비밀번호)
I agree to the Terms and Conditions (이용약관에 동의합니다)
Submit (제출)
Validating on Blur and other Events (Blur 및 기타 이벤트에서 검증)
검증 메시지는 인라인으로도 표시할 수 있어요. UI Forms는 prompt 클래스 이름으로 라벨을 자동으로 포맷해요. 이러한 검증 프롬프트는 폼 제출 대신 입력 변경 시 나타나도록 설정할 수도 있어요.
$('.ui.form')
.form({
fields : validationRules,
inline : true,
on : 'blur'
})
;
First Name (이름)
Last Name (성)
Username (사용자 이름)
Password (비밀번호)
I agree to the Terms and Conditions (이용약관에 동의합니다)
Submit (제출)
Creating Custom Validation (커스텀 검증 만들기)
여러 임의의 규칙을 조합해 폼을 검증할 수 있어요.
$('.ui.form')
.form({
fields: {
dog: {
identifier: 'dog',
rules: [
{
type: 'notEmpty',
prompt: 'You must have a dog to add'
},
{
type: 'contains[fluffy]',
prompt: 'I only want you to add fluffy dogs!'
},
{
type: 'not[mean]',
prompt: 'Why would you add a mean dog to the list?'
}
]
}
}
})
;
Dog (개)
Add Dog (개 추가)
Handling dates from calendars (캘린더 날짜 처리)
캘린더 필드는 자동으로 검증되지만, 값을 Date 객체로 가져오거나 입력값 그대로, 또는 필요에 정확히 맞게 포맷해서 가져올 수도 있어요.
$('.ui.form').form({
dateHandling: 'date'
});
$('.ui.form').form({
dateHandling: 'input'
});
$('.ui.form').form({
dateHandling: 'formatter'
});
Date (날짜)
Returned date value (반환된 날짜 값)
Pick up a date (날짜 선택)
Date
Input
Formatter
Done (완료)
Console
dateHandling을 'date', 'input', 'formatter' 중 하나로 설정해서 캘린더 값이 반환되는 방식을 결정할 수 있어요.
Dirty / Clean state (변경/깨끗 상태)
초기화될 때 폼은 모든 필드 값을 기록하는 깨끗(clean) 상태를 가져요. 필드가 하나라도 수정되면 폼은 변경(dirty) 상태로 들어가고, 이는 onDirty 이벤트로 포착할 수 있어요.
Name (이름)
Gender (성별)
Gender (성별)
Male (남성)
Female (여성)
Username (사용자 이름)
Password (비밀번호)
I agree to the terms and conditions (이용약관에 동의합니다)
Submit (제출)
Reset (재설정)
Clear (지우기)
Set as clean (깨끗 상태로 설정)
Show dirty fields (변경된 필드 표시)
Console
Behaviors (동작)
다음의 모든 동작은 아래 문법으로 호출할 수 있어요:
$('.foo').form('behavior name', argumentOne, argumentTwo)
submit
Submits selected form (선택한 폼 제출)
is valid
Returns true/false whether a form passes its validation rules (폼이 검증 규칙을 통과하는지 true/false 반환)
add rule(field, rules)
Adds rule to existing rules for field, also aliased as `add field` (필드의 기존 규칙에 규칙 추가, `add field`로도 불림)
add fields(fields)
Adds fields object to existing fields (기존 필드에 필드 객체 추가)
remove rule(field, rules)
Removes specific rule from field leaving other rules (필드에서 특정 규칙을 제거하고 다른 규칙은 남김)
remove field(field)
Remove all validation for a field (필드의 모든 검증 제거)
is valid(fieldName, showErrors)
Returns true/false whether a field passes its validation rules. If you add `true` as the second parameter, any failed rule will update the UI (필드가 검증 규칙을 통과하는지 true/false 반환. 두 번째 매개변수로 `true`를 추가하면 실패한 규칙이 UI를 업데이트함)
validate form
Validates form, updates UI, and calls onSuccess or onFailure (폼 검증, UI 업데이트, onSuccess 또는 onFailure 호출)
validate field(fieldName)
Validates field, updates UI, and calls onSuccess or onFailure (필드 검증, UI 업데이트, onSuccess 또는 onFailure 호출)
get field(identifier, strict, ignoreMissing)
Returns element with matching name, id, or data-validate metadata to identifier. When `strict` is true and field is not found, it returns an empty jquery Object, otherwise a fallback jquery input element. Does not throw an error when field is not found and `ignoreMissing` is set to true (식별자와 일치하는 name, id 또는 data-validate 메타데이터를 가진 요소 반환. `strict`가 true이고 필드를 찾지 못하면 빈 jquery 객체를, 그 외에는 폴백 jquery 입력 요소를 반환. `ignoreMissing`이 true면 필드를 찾지 못해도 오류를 던지지 않음)
get value(identifier)
Returns value of element with id (id를 가진 요소의 값 반환)
get values([identifiers])
Returns object of element values that match array of string identifiers. If no IDs are passed will return all fields (문자열 식별자 배열과 일치하는 요소 값의 객체 반환. ID가 전달되지 않으면 모든 필드 반환)
set value(identifier, value)
Sets value of element with id (id를 가진 요소의 값 설정)
set values(values)
Sets key/value pairs from passed values object to matching identifiers (전달된 값 객체의 키/값 쌍을 일치하는 식별자에 설정)
get validation(element)
Returns validation rules for a given jQuery-referenced input field (jQuery로 참조된 입력 필드의 검증 규칙 반환)
has field(identifier, ignoreMissing)
Returns whether a field exists. Does not throw an error when field is not found and `ignoreMissing` is set to true (필드 존재 여부 반환. `ignoreMissing`이 true면 필드를 찾지 못해도 오류를 던지지 않음)
add errors(error)add errors([errors])add errors({identifier:error})add errors({identifier:[errors]})
Manually add errors to form, given an array of string errors or an object using keys as field identifier each containing an error string/array of strings value. Such object will automatically add the field label infront of the error message or, if `inline:true`, will display the inline prompt to the related field. (오류 문자열 배열이나 필드 식별자를 키로 하여 각각 오류 문자열/문자열 배열 값을 담은 객체를 주어 폼에 오류를 수동으로 추가. 이 객체는 오류 메시지 앞에 필드 라벨을 자동으로 추가하며, `inline:true`이면 관련 필드에 인라인 프롬프트를 표시함)
remove errors
Removes all current errors from the error message box (오류 메시지 상자에서 현재 오류를 모두 제거)
add prompt(identifier, error)add prompt(identifier, [errors])
Adds a custom user prompt for a given element with identifier displaying a given string or an array of strings as a [bulleted list](/elements/list.html#bulleted) (식별자를 가진 요소에 대한 사용자 정의 프롬프트 추가. 주어진 문자열이나 문자열 배열을 [글머리 목록](/elements/list.html#bulleted)으로 표시)
clear
Empty all fields and remove possible errors (모든 필드 비우고 가능한 오류 제거)
reset
Set all fields to their initial value and remove possible errors (모든 필드를 초기 값으로 설정하고 가능한 오류 제거)
set defaults
Set fields actual values as default values (필드의 실제 값을 기본값으로 설정)
get dirty fields
Return elements which have been modified since form state was changed to `dirty` (폼 상태가 `dirty`로 변경된 이후 수정된 요소 반환)
set as clean
Set the state of the form to `clean` and set new values as default (폼 상태를 `clean`으로 설정하고 새 값을 기본값으로 설정)
set auto check
Automatically adds the "notEmpty" rule or automatically checks a checkbox for all fields with classname or attribute `required` (classname이나 `required` 속성을 가진 모든 필드에 "notEmpty" 규칙을 자동으로 추가하거나 체크박스를 자동으로 체크)
set optional(identifier, bool = true)
Set or unset matching fields as optional (일치하는 필드를 선택(optional)으로 설정/해제)
destroy
Destroys instance and removes all events (인스턴스를 파괴하고 모든 이벤트 제거)
Settings (설정)
Form Settings (폼 설정)
폼 설정은 폼 검증 동작을 수정해요.
Setting
Default
Description
keyboardShortcuts
true
Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively (enter와 escape 키에 대한 키보드 단축키를 추가해 각각 폼 제출과 필드 blur 처리)
on
submit
Event used to trigger validation. Can be either submit, blur or change. (검증을 트리거하는 이벤트. submit, blur 또는 change 중 하나)
revalidate
true
If set to true will revalidate fields with errors on input change (true로 설정하면 입력 변경 시 오류가 있는 필드를 다시 검증)
delay
true
Delay from last typed letter to validate a field when using on: change or when revalidating a field. (on: change를 사용하거나 필드를 다시 검증할 때 마지막 입력 문자부터 검증까지의 지연)
inline
false
Adds inline error on field validation error (필드 검증 오류 시 인라인 오류 추가)
shouldTrim
true
Whether or not the form should trim the value before validating (검증 전에 폼이 값을 트림할지 여부)
dateHandling
date
Define how calendar values will be returned. Can be either date, input or formatter. (캘린더 값이 반환되는 방식을 정의. date, input 또는 formatter 중 하나)
transition
scale
Named transition to use when animating validation errors. Fade and slide down are available without including ui transitions (검증 오류 애니메이션에 사용할 이름 있는 트랜지션. ui transitions를 포함하지 않아도 Fade와 slide down을 사용할 수 있음)
duration
200
Animation speed for inline prompt (인라인 프롬프트의 애니메이션 속도)
preventLeaving
false
Prevent user from leaving the page if the form has a dirty state by displaying a prompt (폼이 dirty 상태일 때 프롬프트를 표시해 사용자가 페이지를 떠나지 못하게 방지)
autoCheckRequired
false
Whether fields with classname or attribute required should automatically add the "notEmpty" rule or automatically checks checkbox fields (classname이나 required 속성을 가진 필드가 "notEmpty" 규칙을 자동으로 추가하거나 체크박스 필드를 자동으로 체크할지 여부)
errorFocus
true
Whether, on an invalid form validation, it should automatically focus either the first error field (true) or a specific dom node (Use a unique selector string such as .ui.error.message or #myelement) or nothing (false) (폼 검증 실패 시 자동으로 첫 번째 오류 필드(true)나 특정 DOM 노드(.ui.error.message나 #myelement 같은 고유 선택자 문자열)에 포커스하거나 아무것도 하지 않을지(false))
errorLimit
0
Number of max shown errors per field if a field got multiple rules (0=unlimited). This can also be provided for each field individually inside the fields setting. See the Full Validation Settings Example (필드가 여러 규칙을 가질 때 필드당 최대 표시 오류 수, 0=무제한. fields 설정 안에서 필드별로도 제공 가능. 전체 검증 설정 예제 참조)
noNativeValidation
false
Whether native browser form validation messages should be ignored for the whole form. This can also be provided for each field individually inside the fields setting. See the Full Validation Settings Example (브라우저 네이티브 폼 검증 메시지를 폼 전체에서 무시할지 여부. fields 설정 안에서 필드별로도 제공 가능. 전체 검증 설정 예제 참조)
Form Prompts (폼 프롬프트)
기본 폼 프롬프트를 수정하는 설정이에요.
Setting
Default
text
text: {
unspecifiedRule : 'Please enter a valid value',
unspecifiedField : 'This field',
leavingMessage : 'There are unsaved changes on this page which will be discarded if you continue.'
}
The leavingMessage text will only be displayed on Internet Explorer browsers. Other browsers will display a standard message, to prevent intruding popups (more information here).
prompt
prompt: {
range : '{name} must be in a range from {min} to {max}',
maxValue : '{name} must have a maximum value of {ruleValue}',
minValue : '{name} must have a minimum value of {ruleValue}',
notEmpty : '{name} must have a value',
checked : '{name} must be checked',
email : '{name} must be a valid e-mail',
url : '{name} must be a valid url',
regExp : '{name} is not formatted correctly',
integer : '{name} must be an integer',
decimal : '{name} must be a decimal number',
number : '{name} must be set to a number',
is : '{name} must be \'{ruleValue}\'',
isExactly : '{name} must be exactly \'{ruleValue}\'',
not : '{name} cannot be set to \'{ruleValue}\'',
notExactly : '{name} cannot be set to exactly \'{ruleValue}\'',
contain : '{name} cannot contain \'{ruleValue}\'',
containExactly : '{name} cannot contain exactly \'{ruleValue}\'',
doesntContain : '{name} must contain \'{ruleValue}\'',
doesntContainExactly : '{name} must contain exactly \'{ruleValue}\'',
minLength : '{name} must be at least {ruleValue} characters',
exactLength : '{name} must be exactly {ruleValue} characters',
maxLength : '{name} cannot be longer than {ruleValue} characters',
size : '{name} must have a length between {min} and {max} characters',
match : '{name} must match {ruleValue} field',
different : '{name} must have a different value than {ruleValue} field',
creditCard : '{name} must be a valid credit card number',
minCount : '{name} must have at least {ruleValue} choices',
exactCount : '{name} must have exactly {ruleValue} choices',
maxCount : '{name} must have {ruleValue} or less choices',
addErrors : '{name}: {error}',
}
leavingMessage 텍스트는 Internet Explorer 브라우저에서만 표시돼요. 다른 브라우저는 방해가 되는 팝업을 막기 위해 표준 메시지를 표시해요 (자세한 정보는 여기 참조).
Formatters (포맷터)
기본 반환 값을 수정하는 설정이에요. 실제로는 캘린더 필드와 함께 ( dateHandling: 'formatter' 설정을 통해) 독점적으로 사용돼요.
Setting
Default
formatter
formatter: {
date: function(date) {
return Intl.DateTimeFormat('en-GB').format(date);
},
datetime: function(date) {
return Intl.DateTimeFormat('en-GB', {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
}).format(date);
},
time: function(date) {
return Intl.DateTimeFormat('en-GB', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
}).format(date);
},
month: function(date) {
return Intl.DateTimeFormat('en-GB', {
month: '2-digit',
year: 'numeric'
}).format(date);
},
year: function(date) {
return Intl.DateTimeFormat('en-GB', {
year: 'numeric'
}).format(date);
}
}
Callbacks (콜백)
콜백은 특정 동작 이후에 실행될 함수를 지정해요.
Setting
Context
Description
onValid
field
Callback on each valid field (각 유효한 필드에서 콜백)
onInvalid
field
Callback on each invalid field (각 유효하지 않은 필드에서 콜백)
onSuccess(event, fields)
form
Callback if a form is all valid (폼이 모두 유효하면 콜백)
onFailure(formErrors, fields)
form
Callback if any form field is invalid (어떤 폼 필드가 유효하지 않으면 콜백)
onDirty
form
Callback if form state is modified to dirty. Triggered when at least on field has been modified (폼 상태가 dirty로 변경되면 콜백. 하나 이상의 필드가 수정되면 발동)
onClean
form
Callback if form state is modified to clean. Triggered when all fields are set to default values (폼 상태가 clean으로 변경되면 콜백. 모든 필드가 기본값으로 설정되면 발동)
Templates (템플릿)
템플릿은 요소를 구성하는 데 사용돼요.
Template
Arguments
Description
error
Errors (Array)
Constructs the contents of an error message (오류 메시지의 내용 구성)
prompt
Errors (Array, className)
Constructs an element to prompt the user to an invalid field using the given className for error label styling (오류 라벨 스타일링을 위해 주어진 className을 사용해 사용자에게 유효하지 않은 필드를 알리는 요소 구성)
DOM Settings (DOM 설정)
DOM 설정은 이 모듈이 DOM과 어떻게 인터페이스할지 지정해요.
Setting
Default
Description
namespace
form
Event namespace. Makes sure module teardown does not effect other events attached to an element. (이벤트 네임스페이스. 모듈 해제가 요소에 연결된 다른 이벤트에 영향을 주지 않도록 해요.)
selector
selector : {
checkbox : 'input[type="checkbox"], input[type="radio"]',
clear : '.clear',
field : 'input:not(.search):not([type="reset"]):not([type="button"]):not([type="submit"]), textarea, select',
file : 'input[type="file"]',
group : '.field',
input : 'input',
message : '.error.message',
prompt : '.prompt.label',
radio : 'input[type="radio"]',
reset : '.reset:not([type="reset"])',
submit : '.submit:not([type="submit"])',
uiCheckbox: '.ui.checkbox',
uiDropdown: '.ui.dropdown',
uiCalendar: '.ui.calendar'
}
Selectors used to match functionality to DOM (기능을 DOM에 매칭하는 데 사용되는 선택자)
metadata
metadata : {
defaultValue : 'default',
validate : 'validate',
isDirty : 'isDirty'
},
HTML5 metadata attributes (HTML5 메타데이터 속성)
className
className : {
initial: 'initial',
error : 'error',
label : 'ui basic red pointing prompt label',
pressed : 'down',
success : 'success',
required: 'required',
disabled: 'disabled'
}
Class names used to attach style to state (상태에 스타일을 연결하는 데 사용되는 클래스 이름)
Debug Settings (디버그 설정)
디버그 설정은 콘솔로의 디버그 출력을 제어해요.
Setting
Default
Description
name
Form
Name used in debug logs (디버그 로그에 사용되는 이름)
debug
false
Provides standard debug output to console (콘솔에 표준 디버그 출력 제공)
performance
true
Provides standard debug output to console (콘솔에 표준 디버그 출력 제공)
verbose
false
Provides ancillary debug output to console (콘솔에 보조 디버그 출력 제공)
errors
errors : {
method : 'The method you called is not defined.',
noRule : 'There is no rule matching the one you specified',
oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.'
noField : 'Field identifier {identifier} not found',
noElement : 'This module requires ui {element}',
noErrorMessage: 'No error message provided',
}
더 알아보기 (Learn more)
Form 검증 동작은 규칙 기반으로 폼을 검증하고 사용자에게 명확한 오류 피드백을 주는 데 핵심적인 역할을 해요. 커스텀 규칙을 $.fn.form.settings.rules에 추가하고 prompt로 오류 문구를 다듬으면 실제 서비스에 잘 맞는 폼 검증을 만들 수 있어요.