jQuery 유효성 검사 : 유효성 검사 후 오류 남기기

Question

간단한 로그인 양식이 있으며 표시 할 오류가있을 때 jQuery 유효성 검사를 통해 필드 레이블을 바꿉니다. 문제는 일단 오류가 제거되면 레이블이 사라진다는 것입니다.

$(document).ready(function(){ 
    $("#login").validate({ 
     errorPlacement: function(error, element) { 
      element.prev().replaceWith(error); 
     }, 
     rules: { 
      "email": { 
       required: true, 
       email:true, 
      }, 
      "password": { 
       required: true, 
       minlength: 6 
      } 
     }, 
     messages: { 
      email: { 
       required: "Please enter your email address.", 
       email: "Please enter a <u>valid</u> email address" 
      }, 
      password: { 
       required: "Please enter your password.", 
       minlength: "Please enter a password with 6 characters or more." 
      } 
     }, 
    }); 
}); 

그리고 HTML :

나는 여기

내 코드의 ... 이전 라벨의 내용에 다시 복귀, 또는 필드가 유효 때 라벨을 다시 작성하는 방법을 찾을 싶습니다 이메일 필드에 데이터가 존재하지 않는 경우 사용자가 양식을 제출

<form name="login" id="login" method="post" action="authenticate.php"> 
<p> 
    <label for="email">Email Address:</label> 
    <input type="text" name="email" id="email" class="required email" /> 
</p> 
<p> 
    <label for="password">Password:</label> 
    <input type="password" name="password" id="password" class="required" /> 
</p> 
<p> 
    <input type="submit" value="Log In" id="submit" /> 
</p> 

본질적으로

는 다음 이메일에 대한 레이블은 오류로 대체됩니다. 하지만 일단 유효한 입력이 있으면 원래 레이블을 되돌리려합니다. 어떤 제안에 미리

감사합니다, 당신은로 removeChild (라벨)을 시도하고 그것에 때 오류 정확도는을 새로 첨부 할 수 있습니다

Answer 1

이전에 레이블을 오류 레이블로 바꾸는 대신에 error.appendTo (element.prev()) 및 errorElement : "span"을 사용하여 해당 레이블에 스팬을 추가했습니다. 여기에 새로운 코드입니다 :

  $(document).ready(function(){ 
      $("#login").validate({ 
       errorElement: "span", 
       errorPlacement: function(error, element) { 
        error.appendTo(element.prev()); 
        //element.prev().replaceWith(error); 
       }, 
       rules: { 
        "email": { 
         required: true, 
         email:true, 
        }, 
        "password": { 
         required: true, 
         minlength: 6 
        } 
       }, 
       messages: { 
        email: { 
         required: " is Required", 
         email: " is Improperly Formatted" 
        }, 
        password: { 
         required: " is Required", 
         minlength: " is not Long Enough" 
        } 
       }, 
      }); 
     }); 

그것은 이상적이지,하지만 범위가 나타나면 내가 원하는 곳 이상, 에러 코드이며, 사라질 때, 라벨이 그대로 유지됩니다. 방금 전에 레이블과 오류가 문장처럼 완성되도록 ... "이메일 주소"가 필요합니다. " 또는 "전자 메일 주소" "형식이 올바르지 않습니다." 여기에 기여 모두에게

감사합니다,

Z

Answer 2

Z. 라벨을 토글 당신은

errorPlacement: function(error, element) { 
     element.prev().replaceWith(error); 
    }, 

을 제거 할 수 있습니다 sence에게

Answer 3

를 만들기 위해 보인다 메시지 대신 텍스트 상자 옆에 나타납니다.