Really easy field validation 사용하기
흐흐흐 역시나 css는 같이 딸려 온 것을 사용했더니 깔끔하고 좋습니다. js 파일들 경로를 못 찾아서 삽질을 했네요. 이젠 css랑 js파일 경로 지정해 주는 방법을 완벽히 파악했습니다.
사용하는 방법
1. 먼저 필요한 js 파일들을 다운로드 합니다.
2. js파일들을 head 태그 사이에서 경로를 지정해 줍니다.
3. input 태그에서 class와 name 속성을 잘 사용합니다.
4. validator를 사용하는 스크립트를 작성합니다.
1. 여기서 다운로드 할 수 있습니다.
2. js나 css파일들의 경로는 web폴더 기준입니다.
패키지 구조가 위와 같을 때 addMember.jsp에서 ../../../js/뭐시기.js 이런식으로 접근이 안되더군요.
web폴더를 기준으로 js/뭐시기.js 이렇게 써주면 됩니다. 따라서 다음과 같이 코딩하면 됩니다.
3. ID 필드 부분의 코드를 보시면 다음과 같습니다.
<div class="field-label"><label for="field1">ID</label>:</div>
<div class="field-widget"><input name="member.id" id="field1" class="required" title="Enter your id" /></div>
</div>
div는 css를 먹이기 위해 사용했습니다. 빨간 부분이 핵심 부분인데요. 그 중에서도 id와 class 속성이 초 핵심 부분입니다.
id는 해당 컴포넌트를 지칭하기 위한 것입니다. 나중에 자바스크립트에서 저 이름을 사용합니다
class 속성에는 다음과 같은 값을 줄 수 있는데요. 저기에 적당한 값을 넣어 주면 그에 해당하는 validation을 해줍니다.
* validate-number (a valid number)
* validate-digits (digits only)
* validate-alpha (letters only)
* validate-alphanum (only letters and numbers)
* validate-date (a valid date value)
* validate-email (a valid email address)
* validate-url (a valid URL)
* validate-date-au (a date formatted as; dd/mm/yyyy)
* validate-currency-dollar (a valid dollar value)
* validate-selection (first option e.g. 'Select one...' is not selected option)
* validate-one-required (At least one textbox/radio element must be selected in a group - see below*)
4. validator 객체를 사용하는 스크립트를 작성합니다. 위 예제에 있던 스크립트를 그대로 사용했습니다.
function formCallback(result, form) {
window.status = "valiation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('test', {immediate : true, onFormValidate : formCallback});
Validation.addAllThese([
['validate-password', 'Your password must be more than 6 characters and not be \'password\' or the same as your name', {
minLength : 7,
notOneOf : ['password','PASSWORD','1234567','0123456'],
notEqualToField : 'field1'
}],
['validate-password-confirm', 'Your confirmation password does not match your first password, please try again.', {
equalToField : 'field8'
}]
]);
</script>
대강 해석은 되고 내용 추가나 변경은 하겠는데 막상 이렇게 작성하라면 못하겠네요. 뭐 걍 당분간은 컨트롤 C + V 로~ :)