Question

我正在研究输入字段的验证。在第一次在输入字段中添加输入时，验证工作正常。因为可以添加多个字段（将其视为在表中添加另一行），所以我在单击“添加”时会操纵输入字段（该行被克隆，然后添加到表的底部）。

添加第二行时，HTML验证不再起作用，并且在元素上执行elem.checkValidity()时始终为true。我在控制台中看不到任何错误，并且在DOM操作期间验证属性没有更改。我还检查了浏览器之间是否存在差异，但Chrome和Firefox的行为相同。

我猜想在操纵之后我必须以某种方式将有效性重新绑定到元素，但是我不确定。

代码如下：

HTML输入字段

 <input type="number" min="0" max="1" step="0.0001" id="trapezoid_x" class="form-control input_trapezoid trapezoid_x" placeholder="Position x">
 <input type="number" min="0" max="1" step="0.0001" id="trapezoid_p" class="form-control input_trapezoid trapezoid_p" placeholder="Probability">

jQuery自定义函数来检查有效性并添加输入错误

function validInputFields(elem, result) {      
  if (!elem.checkValidity()) { 
    result[$(elem).attr("id")] = elem.validationMessage;
    addInputError($(elem), elem.validationMessage)valid
  } else {
    removeInputError($(elem));
  }
  return result;
}

添加梯形并操纵DOM时的代码

function handleClickAddTrapezoidBtn() {
  const removeIcon = $("<i>").addClass("fas fa-trash");
  const removeTrapezoidBtn = $("<button>").attr({"type": "button"})
                                          .addClass("btn btn-outline-danger trapezoid_remove_btn")
                                          .append(removeIcon);
  const saveIcon = $("<i>").addClass("fas fa-check");
  const saveTrapezoidBtn = $("<button>").attr({"type": "button"}) 
                                        .addClass("btn btn-outline-success trapezoid_save_btn")
                                         .append(saveIcon);
  const clonedTrapezoidFormGroup = $(".trapezoid_form_group").last().clone();
  const valX = parseFloat($(".trapezoid_x").last().val());
  const valP = parseFloat($(".trapezoid_p").last().val());
  const idx = $(".trapezoid_form_group").length -= 1;
  let trapezoids = currentTrapezoids().length > 0 ? currentTrapezoids() : [];
  const inputFields = [$("#trapezoid_x")[0], $("#trapezoid_p")[0]];
  let invalidInput = {};

  $(inputFields).each(function(i, d) {
    validInputFields(d, invalidInput);
  });

  if (!$.isEmptyObject(invalidInput)) { return }
  if (!checkPositionXValue($(".trapezoid_x:last"))) { return }

  $(clonedTrapezoidFormGroup).attr("data-idx", idx).addClass("added_trapezoid");
  $(clonedTrapezoidFormGroup).find(".trapezoid_x").val(valX);
  $(clonedTrapezoidFormGroup).find(".trapezoid_p").val(valP);
  $(clonedTrapezoidFormGroup).find("#add_trapezoid").remove();
  $(clonedTrapezoidFormGroup).find(".input-group-append").append(saveTrapezoidBtn);
  $(clonedTrapezoidFormGroup).find(".input-group-append").append(removeTrapezoidBtn);
  $(clonedTrapezoidFormGroup).find(".invalid-feedback").remove();
  $(clonedTrapezoidFormGroup).find(".trapezoid_x").removeClass("input-warning");
  $(".trapezoid_form_group").last().before(clonedTrapezoidFormGroup);
  $(".trapezoid_x").last().val("");
  $(".trapezoid_p").last().val("");
  $(".trapezoid_form_group").find(".invalid-feedback")
                            .removeClass("input-warning")
                            .empty();
  $(".trapezoid_form-group").find(".trapezoid_x").removeClass("input-warning");

  let data = [];
  data.push(valX);
  data.push(valP);
  trapezoids.push(data);
  sortTrapezoids(trapezoids);
  currentTrapezoids(trapezoids);

  $(".trapezoid_x").last().focus();

  $(removeTrapezoidBtn).bind("click", handleClickRemoveTrapezoidBtn);
  $(saveTrapezoidBtn).bind("click", handleClickSaveTrapezoidBtn);
}

Answer 1

我已经弄清楚了导致问题的原因。我正在克隆输入字段，以便以后将它们添加到表中。这样做时，我还克隆了输入字段的ID并将其添加到页面中。在检查输入字段的有效性时，它将采用输入字段的ID。

如果页面上显示的ID超过1，则将采用第一个ID。就我而言，这是克隆的输入字段。

我通过检查console.log中的哪个字段来发现。

我正在从克隆的元素中删除ID，现在它可以正常工作了。

jQuery HTML验证不适用于操作的DOM元素

1 个答案: