Jquery의 사용자 정의 동작 유효성 검사

Question

Jquery 유효성 검사를 사용하여 사용자에게 피드백을 제공하고 양식에 입력하는 세부 정보의 유효성을 업데이트합니다. 하지만 Jquery 유효성 검사가 생성하는 동작을 사용자 정의하는 데 문제가 있습니다.

<form id="form1"> 
<label for="input1" /> 
<input name="input1" /> 
<input type="submit" /> 
</form> 

사용자가 잘못된 정보를 입력

내가 JQuery와 같은 출력 뭔가를 확인하려는 :

는이 같은 간단한 양식을

<form id="form1"> 
<label for="input1" /> 
<input name="input1" class="error"/><span class="errorIcon">Error</span> 
<p class="errorText">Error message</p> 
<input type="submit" /> 
</form> 

사용자가 필드를 채 웁니다 유효한 정보 Jquery가 유효성을 검사하여 출력하기를 원합니다.

p 필요한 규칙과 사용자 정의 유효성 검사 메시지가 제대로 작동하지만 위에서 설명한 동작을 얻는 데 문제가 있습니다.

$('#form1').validate({ 
showErrors: function(errorMap, errorList) { 
if (errorList < 1) { 
    $('span.errorIcon').remove(); 
    $('p.errorText').remove(); 
    $('input.error').removeClass('error'); 
    $('select.error').removeClass('error'); 
    return; 
} 
$.each(errorList, function(index, error) { 
    if ($(error.element).siblings('.errorText').length === 0 && $(error.element).siblings('.errorIcon').length === 0) { 
    $(error.element).next('p.errorText').remove(); 
    $(error.element).addClass('error'); 
    $(error.element).after(
     $('<p/>') 
    .addClass('errorText') 
    .append(error.message) 
); 
    $(error.element).after(
     $('<span>There is an issue with this field</span>') 
    .addClass('errorIcon') 
    ); 
} 
}); 
}, 
//rules and messages defined here 
); 

은 그래서 위의 나는 현재 필요가 원하는 것을 달성하지 않으며, 나는이 문제를 복잡하게 걸쳐있을 것처럼도 느낀다 :

나는이 현재 있습니다. 나는 Javery와 Jquery에 대해 상당히 익숙하지 않다. 이 분류에 대한 지침은 감사하겠습니다.

건배

EDIT : 샘플 양식 http://jsfiddle.net/WJ9Vt/4/ :

여기

는 A A jsfiddle 링크이다.

Answer 1

또한 CSS 파일을 올리거나 jsfiddle로 할 수 있습니까? 왜냐하면 <span>은 콘텐츠가 없거나 display:block;이고 특별한 경우 height과 width으로 설정되어 있기 때문에 이 표시하지 않기 때문에 errorIcon이 표시되지 않았기 때문입니다.