Автоматическое закрытие тегов формы

Я пытаюсь проверить валидатор с помощью плагина jsquery validator. но он не работает. Теперь я нашел в chorme dev tools, что тег закрывается автоматически!

Похоже, это связано с циклом for в Django. Почему теги формы закрываются автоматически? Что не так с моим скриптом?

В моих .html кодах,

в инструментах разработчика Chrome

мой скрипт валидатора

<script>
      function updaterate(id) {
        jQuery.validator.addMethod(
          "noSpace",
          function (value, element) {
            return value.indexOf(" ") < 0 && value != "";
          },
          "Space are not allowed"
        );
        $("#UpdateForm" + id).validate({
          rules: {
            udtorigin: {
              required: true,
              maxlength: 5,
              noSpace: true,
            },
            udtdest: {
              required: true,
              maxlength: 5,
              noSpace: true,
            },
            udtrate: {
              required: true,
              number: true,
              noSpace: true,
            },
          },
          messages: {
            udtorigin: {
              required: "Input origin",
              maxlength: "It cannot exceed 5 characters.",
            },
            udtdest: {
              required: "Input dest",
              maxlength: "It cannot exceed 5 characters.",
            },
            udtrate: {
              required: "Input rate",
              number: "Allow numbers only",
            },
          },
          submitHandler: function () {
            var origin = $(".origin" + id).val();
            var dest = $(".dest" + id).val();
            var name = $(".name" + id).val();
            var cur = $(".cur" + id).val();
            var rate = $(".rate" + id).val();
            var unit = $(".unit" + id).val();
            var chargeAt = $(".chargeAt" + id).val();
            var group = $(".group" + id).val();

            param = {
              id: id,
              origin: origin,
              dest: dest,
              name: name,
              cur: cur,
              rate: rate,
              unit: unit,
              chargeAt: chargeAt,
              group: group,
            };
            $.ajax({
              type: "POST",
              url: "{% url 'lclupdate' %}",
              data: JSON.stringify(param),
              success: function () {
                $(".updatebtn" + id).css("display", "none");
                $(".cancelbtn" + id).css("display", "none");
                $(".deletebtn" + id).css("display", "");
                $(".editbtn" + id).css("display", "");
                $(".origin" + id).attr("disabled", true);
                $(".dest" + id).attr("disabled", true);
                $(".name" + id).attr("disabled", true);
                $(".cur" + id).attr("disabled", true);
                $(".rate" + id).attr("disabled", true);
                $(".unit" + id).attr("disabled", true);
                $(".chargeAt" + id).attr("disabled", true);
                $(".group" + id).attr("disabled", true);
                $(".tr" + id).css("background-color", "");
              },
            });
          },
        });
      }
    </script>

мой тег формы в моем html включает в себя следующее.

<form id="UpdateForm{{i.id}}">
<tr></tr>
</form>

Но в работах в web как ниже.

<form id="UpdateForm31"></form>
<tr></tr>

Вернуться на верх