Form Validation Plugin
jQuery Validation 플러그인을 이용하면 클라이언트 사이드에서 다양한 커스텀 옵션들을 통해 form validation을 쉽게 처리할 수 있다 . 이미 생성되어 있는 메소드를 활용해도 되고 개발자가 필요한 기능이 있으면 직접 메소드를 만들 수 있어 활용도가 높은 편이다. 에러 메시지들은 디폴트 값인 영어로 표출되지만 37개의 언어를 지원한다고 하는데 나는 다국어 처리를 위해서 에러 메시지를 그대로 활용하지는 않았다.
Form Validation Plugin 활용하기
이번에 회원가입 기능을 구현하기 위해 플러그인을 사용했던 방법들을 정리해 봤다.
🚩 자바스크립트 파일 다운로드
https://github.com/jquery-validation/jquery-validation/releases
Releases · jquery-validation/jquery-validation
jQuery Validation Plugin library sources. Contribute to jquery-validation/jquery-validation development by creating an account on GitHub.
github.com
join.html
<header>
...
<script th:src="@{/js/jquery.validate.min.js}"></script>
...
</header>
<body>
<form id="signup-form">
...
</form>
</body>다운로드 받은 자바스크립트 파일을 include 했다. form-action을 통해서 submit을 하지 않더라도 form 태그로 감싸주고 name값만 input 태그에 잘 넣어주면 아무 문제없이 Form validtion을 사용할 수 있다. 테이블로 form 형식을 만들어서 사용하더라도 form 태그로 감싸서 테이블의 용도를 명시하는 것이 좋다.
join.validation.js
$(document).ready(function () {
$('#signup-form').validate({
rules: {},
messages: {}
});
});페이지가 로드될 때 id값으로 form을 특정하고 다양한 옵션들로 validation 처리를 한다. 여기서는 rules와 messages가 옵션들이다.
Validation options
https://jqueryvalidation.org/validate/
Validation method
http://www.incodom.kr/jquery-validation
jquery-validation - 인코덤, 생물정보 전문위키
# [[jquery]] validation
www.incodom.kr
- required : 필수 입력 엘리먼트
- remote : 엘리먼트의 검증을 지정된 다른 자원에 ajax 로 요청
- minlength : 최소 길이를 지정
- maxlength : 최대 길이를 지정
- rangelength : 길이의 범위를 지정
- min : 최소값을 지정
- max : 최대값을 지정
- range : 값의 범위를 지정
- step : 할당된 단계의 값을 가지도록 지정
- email : 이메일 주소형식으 가지도록 지정
- url : url 형식을 가지도록 지정
- date : 날짜 형식을 가지도록 지정
- dateISO : ISO 날짜 형식을 가지도록 지정
- number : 10진수를 가지도록 지정
- digits : 숫자 형식을 가지도록 지정
- equalTo : 엘리먼트와 다른 엘리먼트의 일치 여부
적용 코드
$('#signup-form').validate({
rules: {
userId: {
rangelength: [idMinLength, idMaxLength],
regex: newIdRegex,
required: true
},
password: {
rangelength: [pwMinLength, pwMaxLength],
regex: newPwRegex,
required: true
},
handPhone: {
regex: '^\\d{3}\\d{3,4}\\d{4}$',
required: true
},
mail_one: {
regex: '^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*',
required: true
},
mail_two: {
regex: '^([a-zA-Z0-9]+\\.)+[a-zA-Z0-9]{2,8}$',
required: true
}
},
messages: {
userId: {
rangelength: i18n('userId.rangelength'),
regex: i18n('userId.regex'),
required: i18n('required')
},
password: {
rangelength: i18n('password.rangelength'),
regex: i18n('password.regex'),
required: i18n('required')
},
handPhone: {
regex: i18n('handPhone.regex'),
required: i18n('required')
},
mail_one: {
regex: i18n('mail_one.regex'),
required: i18n('required')
},
mail_two: {
regex: i18n('mail_two.regex'),
required: i18n('required')
}
}
});- rules에 추가했던 메소드들은 messages(오류 메시지)에도 똑같이 추가해서 각각 설정한 메시지들이 표출되게 설정하면 된다.
- 위의 코드에서는 다국어 처리를 위해서 i18n 함수를 따로 만들어서 처리했다.
2021.11.21 - [Programming Language/JavaScript] - JavaScript 간단한 함수로 다국어 처리하기
JavaScript 간단한 함수로 다국어 처리하기
Validation을 하면서 에러메시지를 다국어 처리했어야 했는데 굳이 라이브러리를 쓰지 않아도 될 것 같아서 간단히 함수와 메시지 파일을 만들어 처리했다. locale 정보 가져오기 기존 서버 코드가
justsora.tistory.com
- 정규표현식을 위한 regex 메소드는 addMethod를 사용해서 생성했다.
$.validator.addMethod("regex", function (value, element, regexp) {
var regex = new RegExp(regexp);
var regexResult = regex.test(value);
return regexResult;
});
여기까지 정규표현식과 최소/최대 길이, 필수 입력 옵션을 사용해서 validation 처리를 했다. 아래는 오류 메시지와 관련하여 커스텀한 내용을 정리했다.
💡 에러메시지가 표출되는 위치는 어디일까?
에러메시지가 표출될 때는 validation 처리를 하는 해당 input태그 옆에 label태그가 생성되고 id값은 'input id값' + '-error''로 생성된다.
💡 에러메시지가 표출되는 위치를 변경하고 싶을 때
rules 메소드에 두 개의 input창에 대한 정규식을 검사하게 설정하면 각각의 에러메시지가 표출되게 되는데 그 위치는 해당 태그의 바로 옆으로 설정되어있고 CSS 상 에러메시지가 옆 공간에 표출되기 어려운 경우에는 밑으로 표출되게 되는 것 같다. 그래서 원래대로라면 표출되는 위치가 각각의 빨간 네모박스이지만 노란색 네모박스로 표출되게 하고 싶다면 errorPlacement 옵션을 사용하면 된다.
join.html
<tr>
<td></td>
<td>
<select th:title="#{title.select.email}">
<option></option>
</select>
<label id="custom_error" class="error"></label>
</td>
</tr>에러메시지를 위치하고 싶은 부분에 label태그를 생성하고 id를 지정한다.
validation.js
$(document).ready(function () {
$('#signup-form').validate({
rules: { ... },
messages: { ... },
errorPlacement: function (error, element) {
if(element.attr("name") == 'mail_one' || element.attr("name") == 'mail_two') {
error.insertAfter("#custom_error");
return;
} else {
error.insertAfter(element);
}
}
});
});- input창의 name이 'mail_one'이거나 'mail_two'일 때 에러메시지는 위에 생성한 label 태그에 위치하게 한다.(정확히는 label 태그 바로 옆)
- 여기서 label로 인해서 위 아래 input 필드 사이 공간이 넓어져서 label 태그를 숨겼다가 다시 표출해서 처리하려고 했는데 방법을 못 찾아서 임시방편으로 display를 block 처리했다.
💡 에러메시지 CSS 적용
label.error { color: red; }
Custom Error Label Placement using jQuery validate (For all or some of your errors)
I would like to place one error label (Not All) in a custom location. jQuery provides this http://docs.jquery.com/Plugins/Validation/validate#toptions option but I could not find anything about how...
stackoverflow.com
https://ej2.syncfusion.com/javascript/documentation/form-validator/validation-rules/
Validation Rules in JavaScript (ES5) Form Validator control - Syncfusion
Validation Rules in JavaScript (ES5) Form Validator control 18 Nov 2021 / 5 minutes to read Default Rules The FormValidator has following default validation rules, which are used to validate the form. Rules Description Example required The form input eleme
ej2.syncfusion.com
'JavaScript' 카테고리의 다른 글
| sweetalert2 메시지 줄 바꿈(개행) (0) | 2022.03.11 |
|---|---|
| element-tiptap Editor (0) | 2022.03.02 |
| JavaScript 간단한 함수로 다국어 처리하기 (0) | 2021.11.21 |
| 자바스크립트 정규표현식(Regular expressions) (0) | 2021.11.16 |
