フィールドがnullの場合にフォームの送信時に要素にクラスを追加

Question

共通のヘッダーを持つクラスContact内にいくつかのフィールドをすべて含むフォームがあります。

ユーザーが任意の連絡先フィールドを入力せずに送信すると、そのヘッダーが赤くなる必要があります。これらのフィールド（first_name、last_name、company、Marketing_Phone、email）は、既に送信されたときに追加されたクラスerrorをすでに持っています。

これらのフィールドはすべてwrap_contactのラベルContact Information *にあります。このラベルはがサブミット時にクラスerrorを受け取っていません。これは私が追加する必要があります。私はラベルにlabel2というIDを付けました。ですから、私の場合、first_name、last_name、company、Marketing_phone、またはemailがサブミット時にnullの場合、label2にはerrorクラスが追加されています。

次のコードを追加しようとしましたが、動作しませんでした。

$("#pardot-form").submit(function(event) { 
    var someElements = document.querySelector("p.error,input[name=263882_11763pi_263882_11763]}"); 

    if (someElements !== "") { 
     document.getElementById('p.label2').addClass = 'error'; 
    } 

}; 

この形式は、http://link.rubiconglobal.com/l/263882/2017-03-24/7ssjでオンライン表示されます。

Answer 1

問題は、あなたのsubmitがまだ発生し、ページがリロードされていることです。 submitアクションの発生を防ぎ、ページを再読み込みしないようにするには、event.preventDefault()とevent.stopPropagation()を追加する必要があります。また、jQueryを使用しているため、return falseという2つの方法があります。参照：https://stackoverflow.com/a/1357151/1736092

Answer 2

のx要素がクラスを持っている場合、yの要素にクラスを追加しない：

 <script> 
    if($('.first_name, .last_name, .company, .zip, .Marketing_Phone, .email').hasClass('error') === true) 
    { 
    $('p#label2').addClass('label2error'); 
    } 
    </script>