满足输入域要求时的onclick函数

Question

我希望提交按钮仅在输入字段满足设置的要求时调用函数。有没有比为每个输入元素制作一个 if 语句更简单的方法？

<div class="container">
            <form>
                <input id="inputname" type="text" name="name" required placeholder="Your Name">
                <input id="email" placeholder="Your E-mail" type="email" name="email" required>
                <input id="phone" type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required>
                <textarea type="text" rows="4" placeholder="Add comments(optional)" id="comments"></textarea>
                <button type="submit" onclick="submitted()"> Reserve a Table</button>
            </form>
</div>
    

<script>
const container = document.querySelector('.container');
function submitted() {
        container.innerHTML = `<i class="fa-regular fa-circle-check"></i><br>
        Thank you, the form has been submitted!`
  }
</script>

Answer 1

是。有关表单验证的更多详细信息，请参阅this tutorial。

特别是 header Using built-in form validation:

When an element is invalid, the following things are true:
...
If the user tries to send the data, the browser will block the form and display an error message.

另请参阅 constraint validation process 下的注释以了解有关何时发生的更多信息。

显示了最初发布的示例 this Fiddle，但在 container 选择器的开头缺少一个点。

作为此处的解决方案，您可以将函数调用移至表单的 onsubmit 处理程序，而不是提交按钮的单击处理程序。 fiddle 是 here 并且仅包含以下更改的标签：<form onsubmit="submitted()"> 和 <button type="submit">.

满足输入域要求时的onclick函数

Onclick Function when input field requirements are met

html

javascript

forms

buttonclick