jQuery 유사한 양식의 단일 입력 유효성 검사

Question

페이지에 두 개의 양식이 있지만 한 필드 (이 경우 전자 메일)의 유효성을 검사하려고하는데 두 가지 양식이 있습니다. 두 양식 모두의 오류를 보여주기 때문에 하나의 입력 필드의 유효성을 검사하면됩니다.

HTML :

<div class="general-form"> 
    <div class="email-error" style="display:none;"> 
    <p>You need valid email</p> 
    </div> 
    <div class="form-wrap"> 
    <div class="form-row"> 
     <input id="from-email" type="email" name="email" placeholder="Your Email" /> 
    </div> 
    <div class="btn-row"> 
     <button class="submit-btn">Submit</button> 
    </div> 
    </div> 
</div> 

<div class="general-form"> 
    <div class="email-error" style="display:none;"> 
    <p>You need valid email</p> 
    </div> 
    <div class="form-wrap"> 
    <div class="form-row"> 
     <input id="from-email" type="email" name="email" placeholder="Your Email" /> 
    </div> 
    <div class="btn-row"> 
     <button class="submit-btn">Submit</button> 
    </div> 
    </div> 
</div> 

JS :

$(".submit-btn").on("click", function() { 
    var $this = $(this); 
    var valid_email = $this.find("#from-email").val(); 
    if (/(.+)@(.+){2,}\.(.+){2,}/.test(valid_email)) { 
    return true; 
    } else { 
    $this.parents().find(".email-error").show(); 
    return false; 
    } 
}); 

전반적인 결과를 보면, 유효성 검사를 통과하기 위해 그것을 얻을 수 있지만, 오류 메시지가 형태와 I 모두 보여줍니다 그것을 얻는 방법을 모르기 때문에 그 특정한 형태의 에러 메시지 만 보여준다. 나는 체인을 너무 멀리 밀고 있고 두 폼 모두를 테스트하고있는 것으로 추측하고 있습니다.하지만 어떤 것이 타당한지를 알기 위해 어느 것이 구체적으로 타게 될지 기억이 안납니다.

Answer 1

JS 추가합니다. 귀하의 JS에서 ID가 from-email 인 모든 필드를 검사하고 있습니다.이 경우 ID가 모두 입력 되었기 때문에 두 입력이 모두 확인됩니다.

그들 중 하나가 틀리면 몸으로 올라가서 오류 래퍼를 모두 찾아 낼 부모님 모두에게서 email-error을 찾고 있습니다. $this.parents(“.general-form“)은 거래를하고 귀하의 경우에는 입력 및 오류의 래퍼로 이동합니다.

항상 ID가 고유해야합니다.

Answer 2

은 그냥> 필수 속성이 당신은 왜 아이디 from-email을 두 배로

$("#formid").validate();