1

我正在尝试在 HTML 中实现一个按钮，该按钮在单击时调用一个函数，该函数检查文本输入是否为空。如果是这样（尚未输入信息），则应生成输入字段的错误消息。

我正在试验一个不提交表单的按钮。但是，如果您有一个带有提交表单的按钮的解决方案（除非字符串为空），我很乐意接受。在那种情况下（实际上），我想使用 setCustomValidity，因为我想要一个错误消息，而不是在页面重新加载之后，如果这是有意义的（因为这样表单中的输入就不会保留）。

这是我到目前为止所拥有的：

<p>
        <label for="image_info">Information</label>
        <br>
        <input type="text" name="image_info" id="image_info">
    </p>

    <br>

    <button type="button" onclick="imageErrorMessage()">Check</button>

    <script type="text/javascript">
        function imageErrorMessage(image_info){
        if(image_info === "")document.getElementById('image_info').setCustomValidity('Please enter your information.');
        else document.getElementById('image_info').setCustomValidity('')
        }
    </script>

不幸的是，某些东西似乎丢失/错误，因为它不起作用。我对 Javascript 还很陌生，所以错误可能很清楚，我不知道。

非常感谢！

4

2 回答 2

1

您的代码中有一些错误：

  • HTML 位于段落中，而不是<form>.
  • 您没有正确验证该字段
  • 您没有阻止提交表单
  • 您没有向用户显示错误消息

我的解决方案：

  • 有个<form>
  • 阻止提交表单
  • 检查字段
  • 如果为空则给出错误，否则通过 JavaScript 提交表单

const $form = document.getElementById('form')
const $submit = document.getElementById('submitButton')
const $imageInfo = document.getElementById('image_info')

$submit.onclick = (event) => {
  event.preventDefault()

  if (!$imageInfo.value) {
    $imageInfo.setCustomValidity('Please enter your information.')
    $imageInfo.reportValidity()
  } else {
    $form.submit()
  }
}
* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
<form id="form">
  <label for="image_info">Information:</label>
  <input type="text" name="image_info" id="image_info">
  <button id="submitButton">Submit</button>
</form>

于 2020-12-05T21:03:09.583 回答
1

出现了三个问题：

  • if 语句缺少很多花括号（注意：显然这些不是必需的，但我更喜欢它们以提高可读性）
  • 你需要放在document.getElementById('image_info').reportValidity();setCustomValidity 之后
  • 你没有发送任何参数到imageErrorMessage

function imageErrorMessage(image_info){
  if(image_info == "") {
    document.getElementById('image_info').setCustomValidity('Please enter your information.');
    document.getElementById('image_info').reportValidity();
  } else {
    document.getElementById('image_info').setCustomValidity('')
    document.getElementById('image_info').reportValidity();
  }
}
<p>
  <label for="image_info">Information</label>
  <br>
  <input type="text" name="image_info" id="image_info">
</p>
<br>
<button type="button" onclick="imageErrorMessage(document.getElementById('image_info').value)">Check</button>

于 2020-12-05T21:03:19.273 回答