jQueryは類似のフォームで単一入力を検証します

Question

同じページに2つのフォームがありますが、1つのフィールド（この場合は電子メール）を検証しようとしていますが、両方のフォームのエラーを表示するだけなので、入力フィールドを検証するだけです。

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; 
    } 
}); 

全体的に、私は検証を通過するようにそれを得ることができますが、エラーメッセージがフォームと私の両方のために示していそれを入手する方法がわからないので、その特定のフォームのエラーメッセージだけが表示されます。私はチェーンをあまりにも遠くに押し上げていると思っています。両方のフォームをテストしていますが、それが意味をなさない場合は、どちらを具体的にターゲットにするのか覚えていません。

Answer 1

をJS追加します。あなたのJSでは、id from-emailのすべてのフィールドをチェックしています。この場合、両方のIDがチェックされています。

いずれかが間違っている場合は、あなたの両親の中のemail-errorを探しています。これらの親はすべて、身体に上がってエラーラッパーをすべて見つけます。 $this.parents(“.general-form“)は取引を行い、あなたのケースでは入力とエラーのラッパーにのみ移動します。

あなたのIDが常に一意であることを確認してください。

Answer 2

だけで必要な>属性を追加し、これはあなたが理由のID from-emailを倍増

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