Flaskは、最初の検証時に動的に追加された入力フィールドを認識しません

ユーザーがボタンをクリックすると、ボタンを介して動的に新しいファイルアップロードフィールドを追加します。検証は1秒おきの試行でのみ渡されます。これは、flask / wtformsが動的に作成された新しい入力フィールドを認識しないためです。送信ボタンをクリックするたびに、ファイルが欠落していることを最初のフィールドに対してのみ警告します。

必要なすべてのファイルを入力して送信すると、最初の試行では失敗しますが、その後、フィールドリストが必要なサイズに初期化され、次に同じ量のファイルを送信したときに機能します。

forms.py

class ChildForm(FlaskForm):
    class Meta:
        csrf = False

    childvalue1= IntegerField(default=1, validators=[DataRequired()])
    childvalue2= FileField(validators=[FileRequired(),FileAllowed(['mp3'])])


class ParentForm(FlaskForm):
    parentvalue1= FileField('PDF File', validators=[FileRequired(), FileAllowed(['pdf'])])
    parentfieldlist= FieldList(FormField(ChildForm), min_entries=1)
    submit = SubmitField('Upload')

htmlファイル

<form action="" method="post" enctype="multipart/form-data">
        {{ form.hidden_tag() }}

        <!-- PDF Upload -->
        <div>
            <label class="label">{{ form.parentvalue1.label }}</label>
            {{ form.parentvalue1}}
            <br>
        </div>

        <!-- Audio Upload -->
        <br>
        <div>
            <label class="label">{{ form.parentfieldlist.label }}</label>
            <table id="audiotable">
                {% for entry in form.parentfieldlist%}
                <tr>
                    {% for subfield in entry %}
                    <td>{{ subfield }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </table>
        </div>

        <br>
        <button type='button' class="add_more">Add More Files</button>
        <br><br>
        <p> {{ form.submit(class='button is-link') }}

    </form>

より多くの入力フィールドを作成するJS

<script>

    String.format = function () {
        var s = arguments[0];
        for (var i = 0; i < arguments.length - 1; i++) {
            var reg = new RegExp("\\{" + i + "\\}", "gm");
            s = s.replace(reg, arguments[i + 1]);
        }
        return s;
    }

    var fieldNum = 1;
    $('.add_more').click(function (e) {
        e.preventDefault()
        var firstTag = "parentfieldlist-" + fieldNum + "-childvalue1"
        var secondTag = "parentfieldlist-" + fieldNum + "-childvalue2"
        var rowTemplate = `<tr><td><input type='text' id=${firstTag } name=${firstTag } value=${fieldNum + 1} /></td>
            <td><input type='file' id=${secondTag } name=${secondTag }/></td></tr>`;
        $("#audiotable").append(rowTemplate);
        fieldNum++;
    });
    
</script>

誰かがそれを機能させる方法を知っていますか？もう一つの例。2番目のアップロードフィールドを追加して送信すると、関数は次のように出力します。

[{'childvalue1': 1, 'childvalue2': <FileStorage: 'somefile.mp3' ('audio/mpeg')>}, {'childvalue1': 2, 'childvalue2': None}]

もう一度やり直して提出すればうまくいきます。append_entry（）を使用するPython関数へのajax呼び出しを使用したハッキーな解決策がいくつかありますが、私はそれらを確信しておらず、それらが本当に問題を解決するかどうかはわかりません。本質的に、ファイルは最初の送信時に常になしです

編集：childvalue 2から「FileRequired」を削除すると、まったく機能しません。これが私の意味を示す写真です

フォームは、ボタンで追加した2番目のアップロードフィールドを認識していません提案をありがとう