jQuery-Validation-Engine에서 "submit 단추를 누르면 오류 메시지가 다시 표시되지 않습니다."

양식 입력 내용을 실시간으로 확인할 수 있는 플러그인'jQuery-Validation-Engine'의 경미한 오류가 마음에 들어 간단한 방법으로 대응했습니다.

jQuery-Validation-Engine 다운로드 및 기본 사용법

다운로드 및 기본 사용 방법에 대해서는 다음 링크를 참조하십시오.
■jQuery-Validation-Engine
https://github.com/posabsolute/jQuery-Validation-Engine
■ 표 입력 내용을 실시간으로 확인하는 방법
http://allabout.co.jp/gm/gc/420327/

오류 내용

이 플러그인은 매우 편리하지만, 가져온 후에 다음과 같은 몇 가지를 발견하였다.
초기 규격에서 필수 항목을 입력하지 않은 상태에서submit 단추를 누르면 입력하지 않은 칸에 오류 정보를 표시하고 자동으로 이 위치로 스크롤하여 입력 칸에 초점을 맞춥니다.

이 오류 정보는 누르면 사라지지만, 삭제한 후 입력하지 않은 상태submit를 유지하면 이번에는 오류 메시지가 표시되지 않고 위아래로 스크롤됩니다.
이것은 페이드 인 오류 메시지가 발생한 후에 페이드 인 처리를 하지 않았기 때문이다.
미입력이 두 번 이상 지속된다고 가정하지 않았다는 거죠?

처리 방법

이에 대응하기 위해 페이드가 아닌 스타일시트의display:none;에서 설명한 대로 해당 매개변수의 값을 수정합니다.

jquery.validationEngine.수정 js

■ jQuery-Validation-Engine 다운로드
https://github.com/posabsolute/jQuery-Validation-Engine
우선, js 디렉터리의 jquery.validationEngine.텍스트 편집기 등에서 js를 열고 29줄마다 아래 4줄을 삭제하거나 주석합니다.
삭제할 코드

$(this).fadeOut(150, function() {
    // remove prompt once invisible
    $(this).closest('.formErrorOuter').remove();
});

이것은 페이드아웃할 코드이기 때문에, 이 네 줄을 삭제하고, 대신 스타일시트에 숨기기 위해class 이름을 추가합니다.
추가할 코드

$(this).addClass('hide');

두 번째submit 단추로 다시 표시하기 위해 ↑ 에 추가된class를 삭제합니다.
270줄 이하 코드
수정 전

_onSubmitEvent: function() {
    var form = $(this);
    var options = form.data('jqv');

// 以下略

여기에 한 줄을 추가하다.
수정 후

_onSubmitEvent: function() {
    var form = $(this);
    var options = form.data('jqv');

    $('.formError').removeClass('hide');    //←この一行を追加

// 以下略

이로써class의 추가, 삭제가 완료되었습니다.

validationEngine.jquery.css 변경

css 디렉토리의 validationEnginejquery.텍스트 편집기 등에서 css를 열고 방금 추가한class와 스타일을 추가합니다.
마지막 줄에 더하면 나무랄 데가 없다.

.formError.hide {
    display: none;
}

리본에서 를 클릭합니다.
submit 단추 클릭
- 오류 메시지 표시
- 오류 메시지를 삭제하려면 누르십시오("hide"class 추가)
→submit 단추 클릭
→ 다시 표시 ("hide"class 삭제)
의 처리가 완료되었고 어색한 위아래 스크롤도 없었다.