当文本框留空时，不要在HTML格式内部工作

Question

<form method="get">
    <input type="text" name="StudentID" placeholder="Ex: ZX12345"
        id="StudentID" pattern="[A-Z]{2}[0-9]{4}" required><br> <br>
    <button name="submit" type="button" value="submit"
        onclick="studentId()">Submit</button>
</form>

在这里，即使我不提供studentID，它也没有显示任何错误甚至需要使用和我面临的其他问题是模式不起作用。

Answer 1

使用此代码 -

<form method="post">
    <input type="text" name="StudentID" placeholder="Ex: ZX12345"
        id="StudentID" pattern="[A-Z]{2}[0-9]{4}" required="required"><br> <br>
    <button name="submit" type="submit" value="submit"
        onclick="studentId()">Submit</button>
</form>

应提交按钮类型以检查输入字段。

请参阅this。

Answer 2

更新要提交的按钮类型。

<button name="submit" type="submit" value="submit"
        onclick="studentId()">Submit</button>

因为表单标记始终检查所需字段是否为空，或者仅提交。

Answer 3

你应该在你的输入中添加结束斜杠并从按钮中删除type属性

<form method="post">
    <input type="text" name="StudentID" placeholder="Ex: ZX12345"
        id="StudentID" pattern="[A-Z]{2}[0-9]{4}" required/>
    <button name="submit" onclick="studentId()">Submit</button>
</form>

这是一个演示https://codepen.io/kjagannathreddy/pen/wRYpOm

Answer 4

该问题的解决方案是在javascript方法中使用。

event.preventDefault();