根据条件生成错误消息的按钮

Question

我正在尝试在 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>

不幸的是，有些东西似乎是 missing/wrong，因为它不起作用。我是 Javascript 的新手，所以错误可能 crystal 很明显，但我不知道。

非常感谢！

Answer 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>

Answer 2

存在三个问题：

你遗漏了很多 if 语句的大括号（注意：显然这些不是必需的，但我更喜欢它们以提高可读性）
你需要在 setCustomValidity

document.getElementById('image_info').reportValidity();

您没有向 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>

根据条件生成错误消息的按钮

Button that generates error message on condition

html

javascript

button

error-messaging