当字段为空或输入了错误的字段时，我想使用红色边框验证表单字段

I want to validate a form field using a red border when field is empty or wrong field is entered

本文关键字：字段 边框 表单 验证 红色 输入 错误      更新时间：2023-09-26

当字段为空或用户输入了错误的字段时，我想使用红色边框验证此表单。

当字段无效时，我还想禁用提交按钮。

请注意，还有其他字段不是强制性的，如MOBILE和EMAIL（它们可以稍后在"编辑用户详细信息"中提交）。虽然如果输入了错误的电子邮件，我也想验证一下。

<form  action="" method="POST">
    <input type="date" name="date" placeholder="Registration Date" /></br>
    <input name="full_names" type="text" placeholder="Full names" /></br>
    <input name="mobile" type="text" placeholder="Mobile" /></br>
    <span>Select status </span>
    <select name="status">                                                            
        <option value="Paid">Paid</option>
        <option value="Unpaid">Unpaid</option>
    </select></br>
    <span>Select Chapter </span>
    <select name="chapter">                                                           
        <option value="Known">Known</option>
        <option value="Unknown">Unknown</option>
    </select></br>
    <span>Select Gender </span>
    <select name="gender">                                                            
        <option value="Male">Male</option>
        <option value="Female">Female</option>
    </select></br>
    <input type="text" name="email" placeholder="Email Address" /></br>
    <textarea type="text" placeholder="Any Remarks" rows="2" name="remarks"></textarea></br>
    <button type="submit">Submit </button> 
</form>

HTML5内置了很多这样的属性，具有required属性，并能够提供正则表达式pattern属性进行验证。有些甚至是内置的，比如使用type="email"属性而不是type="text"。

使用HTML5验证+CS3，您可以了解:invalid状态，并将样式应用于该状态下的元素。

尽管这不会将disabled状态应用于提交按钮，但如果验证失败，它不会提交表单。

input,
textarea {
  margin: 5px 0;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
input:invalid,
select:invalid,
textarea:invalid {
  border-color: red;
}
<form action="" method="POST">
  <input type="date" name="date" placeholder="Registration Date" required />
  <br/>
  <input name="full_names" type="text" placeholder="Full names" required />
  <br/>
  <input name="mobile" type="tel" pattern='['+]'d{2}['(]'d{2}[')]'d{4}['-]'d{4}' placeholder="Mobile" title="+99(99)9999-9999" />
  <!-- Pattern from: http://www.htmlgoodies.com/html5/tutorials/whats-new-in-html5-forms-email-url-and-telephone-input-types.html#fbid=UQp7PiVwsX2 -->
  <br/>
  <span>Select status </span>
  <select name="status" required>
    <option value="Paid">Paid</option>
    <option value="Unpaid">Unpaid</option>
  </select>
  <br/>
  <span>Select Chapter </span>
  <select name="chapter" required>
    <option value="Known">Known</option>
    <option value="Unknown">Unknown</option>
  </select>
  <br/>
  <span>Select Gender </span>
  <select name="gender" required>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
  <br/>
  <input type="email" name="email" placeholder="Email Address" />
  <br/>
  <textarea type="text" placeholder="Any Remarks" rows="2" name="remarks" required></textarea>
  <br/>
  <button type="submit">Submit</button>
</form>

相关文章：