複数フォームのJquery検証エラー

Question

同じページに2つのフォームがあります。 jquery.validateプラグインが動的にロードされています。動的にロードされるため、ユーザーが「送信」ボタンをクリックすると、検証ルールが作成されます。検証は最初のフォーム（フォームID = form）では正常に機能しているようですが、2番目のフォーム（フォームID = #form1）では機能しません。

次のエラーが表示されます。 this[0] is undefined。 This question has some solutions.しかし、私のスクリプトが動的にロードされているので、解決策は機能しません。

また、ほとんどのスクリプトはほとんどすべてのブラウザにサポートを提供しているため、ほとんどのスクリプトはプレーンなjavascriptであり、フォーム要素の名前を制御することはできません。 2番目のフォーム検証を続行するには？ありがとう。

<form id="form"> 
    <input type="text" name="Please%20provide%20name." /> 
    <input type="text" name="Please%20provide%20email." /> 
    <input type="text" name="%50%6C%65%61%73%65%20%70%72%6F%76%69%64%65%20%70%68%6F%6E%65%20%6E%75%6D%62%65%72%2E" data-parsley-required /> 
    <input type="submit" value="Submit" /> 
</form> 
<form id="form1"> 
    <input type="text" name="name" /> 
    <input type="text" name="email" /> 
    <input type="text" name="phone" /> 
    <input type="submit" value="Submit" /> 
</form> 

"use strict"; 
document.addEventListener("DOMContentLoaded", function() { 
    // on load 
    var forms_count = document.forms.length, 
     i = 0; 
    // find all forms in the page 
    for (i; i < forms_count; i++) { 
     // for each form 
     var form = document.forms[i]; 
     if (form.addEventListener) { 
      // add submit handler to validate 
      form.addEventListener("submit", validateForm, false); //Modern browsers 
     } else if (form.attachEvent) { 
      form.attachEvent('onsubmit', validateForm); //Old IE < 9 
     } 
    } 
    // add scripts 
    var script = document.createElement('script'); 
    script.setAttribute('type', 'text/javascript'); 
    script.setAttribute('src', "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"); 
    document.head.appendChild(script); 

    // add validation rules 
    validationClasses(); 
}); 

function validationClasses() { 
    var forms_count = document.forms.length, 
     i = 0; 
    // find all forms in the page 
    for (i; i < forms_count; i++) { 
     // for each form 
     var form = document.forms[i]; 
     // get form elements 
     var elements = document.getElementById(form.id).elements; 
     for (var element of elements) { 
      // for each element, check name field and add appropriate validation class. 
      var decode_name = decodeURIComponent(element.name); 
      if (decode_name.toLowerCase().match(/(name|first name)/)) { 
       // matching for name field. 
       element.className += " valid_name"; 
      } 
      if (decode_name.toLowerCase().match(/(email|email address)/)) { 
       // matching for email field. 
       element.className += " valid_email"; 
      } 
      if (decode_name.toLowerCase().match(/(phone|phone number)/)) { 
       // matching for phone field. 
       element.className += " valid_phone"; 
      } 
     } 
    } 
} 

function validationJQRules() { 
    // custom rules 
    $.validator.addMethod("mobilenumber", function(value, element) { 
     return this.optional(element) || /^[0-9-+\s]+$/.test(value); 
    }, "Invalid Number"); 

    // Define validate form rules in jquery validate 
    jQuery.validator.addClassRules("valid_name", { 
     required: true, 
    }); 
    jQuery.validator.addClassRules("valid_email", { 
     required: true, 
     email: true 
    }); 
    jQuery.validator.addClassRules("valid_phone", { 
     required: true, 
     mobilenumber: true 
    }); 
} 

function validateForm(event) { 
    validationJQRules(); 
    var form = this, 
     valid = false; 

    if (!valid) { 
     // stop further execution of the event if not valid. 
     event.preventDefault(); 
     event.stopPropagation(); 
     event.stopImmediatePropagation(); 
    } else { 
     console.log("proceed with form submit."); 
    } 

    console.log(form.id); 
    $(form.id).valid(); 
    console.log($(form.id).valid()); 
}; 

また、注入された検証スクリプトを用いて検証を行うための任意の他の代替方法は、非常に高く評価されています。

Answer 1

$（form.id）.valid（）が問題になることがあります。 使用

$("#" + form.id).valid(); 
console.log($("#" + form.id).valid());