我正在尝试使用这里描述的Bootstrap 4验证工具。验证确实能够正确检测到留空的输入或无效的电子邮件,但它没有使用我在文本区域标记中指定的自定义无效工具提示。
这是我的表格:
<div class="card">
<div class="card-body">
<h2 class="card-title">Email</h2>
<form class="needs-validation" action="/contact/form-submit" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input name="email" type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="name@example.com" required>
<small id="emailHelp" class="form-text text-muted">We need this to respond. It will not be stored by this website.</small>
</div>
<div class="form-group">
<div>
<label for="messageTextarea">Email message</label>
<textarea name="message" class="form-control" id="messageTextarea" rows="3" required></textarea>
<div class="invalid-tooltip">
Please provide a message.
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
您可以看到,我在表单中指定了一个带有class="invalid-tooltip"
的div,但它没有被使用。如果您试图在将messageTexarea文本区域留空的情况下提交表单,则显示的工具提示会显示";请填写此字段"而不是";请提供消息">
我是不是忽略了什么?文档中并没有提供足够的信息来说明需要什么样的标记才能使其工作。
尝试在表单标记中添加"novalidate"以避免HTML5验证检查。
<form class="needs-validation" action="/contact/form-submit" method="post" novalidate>