Question

如果我没有表单，如何在html上触发验证

即在这里我已经设置了必填属性，但是当我单击“保存”按钮时，该字段没有显示红色轮廓，我认为这是因为不是SaveButton调用表单而是调用Javascript，所以我可以调用在Java语言中触发验证？

function cloneProfile() {
  var newProfileName = document.getElementById("clone_profile").value;
  var origProfile = profile.options[profile.selectedIndex].value;
  var index = profile.selectedIndex;

  if (newProfileName.length == 0) {
    return;
  }
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/start.clone_profile', true);
  xhr.setRequestHeader("Content-type", "text/plain");
  xhr.send(origProfile + "\0" + newProfileName);
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      if (xhr.responseText.startsWith('ok')) {
        document.getElementById("clone_profile").value = "";
        $('#cloneprofilemodal').modal('hide');
        var newProfile = document.createElement("option");
        newProfile.text = newProfileName;
        newProfile.value = xhr.responseText.substring(3);
        profile.add(newProfile);
        profile.selectedIndex = profile.length - 1;

        //TODO is not ordered alphabetically, means wrong one selected but also Default not put at start
        removeAllAlerts(document.getElementById("cloneprofilemodalAlerts"));
      }
    }
  };
}

<div class="modal-body">
  <div class="form-group">
    <label for="clone_profile" id="clone_profilelabel">
      Please enter name for new Profile
    </label>
    <input type="text" id="clone_profile" name="clone_profile" aria-describedby="clone_profilelabel" class="largeinputfield form-control" required>
  </div>
  <div id="cloneprofilemodalAlerts">
  </div>
</div>
<div class="modal-footer">
  <button data-dismiss="modal" class="btn btn-outline-secondary">
    Cancel
  </button>
  <button onclick="cloneProfile();" class="btn btn-outline-primary">
    Save
  </button>
</div>

Answer 1

您可以使用事件监听器禁用保存按钮，直到输入的长度大于0：

function cloneProfile() {
  // your code
}

const button = document.getElementById('save-button')
const input = document.getElementById('clone_profile')

input.addEventListener('input', e => button.disabled = e.target.value.length === 0)

<div class="modal-body">
  <div class="form-group">
    <label for="clone_profile" id="clone_profilelabel">
      Please enter name for new Profile
    </label>
    <input type="text" id="clone_profile" name="clone_profile" aria-describedby="clone_profilelabel" class="largeinputfield form-control" required>
  </div>
  <div id="cloneprofilemodalAlerts">
  </div>
</div>
<div class="modal-footer">
  <button data-dismiss="modal" class="btn btn-outline-secondary">
    Cancel
  </button>
  <button disabled id="save-button" onclick="cloneProfile();" class="btn btn-outline-primary">
    Save
  </button>
</div>

请注意，我在您的按钮上添加了id以及disabled属性。

input.addEventListener('input', e => button.disabled = e.target.value.length === 0)

我们在输入中添加了一个事件监听器，早先声明了
我们监听'input的evnet（或oninput），然后继续提供回调函数
我们采用传递的参数e，即事件。
我们可以使用button.disabled
我们使用e.target访问输入元素本身，然后使用.value访问该输入的值，然后使用.length访问长度
由于我们正在检查它等于0，所以该语句的计算结果为true或false

Answer 2

这就是我一直在寻找的东西，所有内容都来自评论

function cloneProfile() {
  console.log("run your code here")
}

const button = document.getElementById('save-button')
const input = document.getElementById('clone_profile')

input.addEventListener('input', e => button.disabled = !(e.target.validity.valid))

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

div {
  margin-bottom: 10px;
}

<div class="modal-body">
  <div class="form-group">
    <label for="clone_profile" id="clone_profilelabel">
      Please enter name for new Profile
    </label>
    <input type="text" id="clone_profile" name="clone_profile" aria-describedby="clone_profilelabel" class="largeinputfield form-control" required>
  </div>
  <div id="cloneprofilemodalAlerts">
  </div>
</div>
<div class="modal-footer">
  <button data-dismiss="modal" class="btn btn-outline-secondary">
    Cancel
  </button>
  <button disabled id="save-button" onclick="cloneProfile();" class="btn btn-outline-primary">
    Save
  </button>
</div>

如果没有表单，如何在html上触发验证

2 个答案: