jQueryでのformのバリデーションチェックができなくて困っています

Question

前提・実現したいこと

jQueryで、HTMLのフォームに入力チェックをしたいです。
具体的には、テーブル内に存在するinputに対して、入力チェックをしたいです。

formタグ内にinputがある場合はできるのですが、inputがformタグの外にあり、form属性で繋がっている場合にチェックが利きません
どうしたらよいでしょうか？

①inputがformタグの外にあるパターン(バリデーションチェック不可能)

～略～
 <tr class="table-warning">
   <td class="border align-middle" style="width:40%">
     <input type="text" size="70" maxlength="80" name="test" form="register"/>
   </td>
～略～

<form id="register" action="{% url 'registerItem:mercari_separate_list' %}" method="POST" class="form-horizontal">
{% csrf_token %}
</form>

jQuery(function($) {
$('#register').validate({

    //検証ルール設定
    rules: {

～～以下略～

②inputがformタグの中にあるパターン(バリデーションチェック可能)

<form id="register" action="{% url 'registerItem:mercari_separate_list' %}" method="POST" class="form-horizontal">
input id="test" type="text" size="20" maxlength="80" name="test" form="register"/>
{% csrf_token %}
</form>

jQuery(function($) {
$('#register').validate({

    //検証ルール設定
    rules: {

～～以下略～

補足

上記の例ですと、①の場合でもformにregisterが紐づいているので、テーブル内のinputに対しても入力チェックが利くと思ったのですが、うまくいきません。
どうしたらよいでしょうか？

Answer 1

form の elements プロパティで所属するコントロールを取得することができます。
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/elements

参考:
https://teratail.com/questions/188338

Comments

[ryo_0126]

ありがとうございます。
HTML及びjQueryの知識が素人なので恐縮ですが、
下記コマンドにより、registerフォームに紐づくinputを調べてみましたが、
①と②のinputに違いがみられず、解決策が見いだせずにいます

console.log(document.getElementById("register").elements)

[FKM]

formタグ内のフォーム要素が及ぶ範囲は、formタグの内部にあるものに限られます。
①は外側、②は内側にあるので①は無効、②は有効となります。
document.getElementById('register')とするより、
document.form.name名とした方が、その理屈はわかりやすいと思います。

もし①の方法を使いたいなら、x_x氏のいうとおり、エレメントだけを取得するという手はありますが、その際のセレクタを外に出しているフォーム要素と合わせないとイベントが起こらないですよ。

[ryo_0126]

ありがとうございます！！
試してみます！