关于使用模式,最大长度和必需的多次验证错误消息。我只想显示一个自定义错误,而不是三个不同的错误

时间:2019-03-18 11:36:04

标签: html5 forms validation bootstrap-4

我正在使用引导程序4,并使用以下代码替换错误消息。

 <input type="text" pattern="[1-9]{1}[0-9]{3}" maxlength="4" class="form-control" placeholder="Enter User No." required oninvalid="this.setCustomValidity('Please enter valid User No.')" oninput="setCustomValidity('')">

但是我遇到了三个错误。

  1. “在点击提交按钮时,请输入有效的用户编号。”
  2. “请匹配请求的格式” “请输入有效的用户编号”  使用退格键清除。
  3. “请填写字段” ,以清除所有文本。

我想要的。

  1. 仅在单击提交按钮时显示的错误。 [此功能正常 现在]。
  2. 在使用退格键清除内容时不显示任何错误,或者始终显示一条错误消息。

.jumbotron-m-color {
  border-radius: 0;
  background-color: #e8e4db;
  width: 100%;
  height: 80vh;
  background-image: linear-gradient(to top, #a6c1ee 0%, #fbc2eb 100%);
}

.form-container {
  position: absolute;
  top: 15vh;
  padding: 30px;
  border: 1px solid whitesmoke;
  border-radius: 0.25rem;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  background-color: #f4fdfd;
}
<div class="jumbotron-m-color container-fluid ">


  <div class="row justify-content-center">
    <div class="col-12 col-sm-6 col-md-3">
      <form id="Login-form" class="form-container">
        <div class="form-group">

          <label for="exampleInputEmail1">User No.</label>


          <input type="text" pattern="[1-9]{1}[0-9]{5}" maxlength="6" class="form-control" placeholder="Enter User No." required oninvalid="this.setCustomValidity('Please enter valid User No.')" oninput="setCustomValidity('')">

        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="password" placeholder="Password">
        </div>
        <div class="form-group form-check">
          <span>
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1" style="font-size:small;">Remember me</label>
                    </span>
        </div>
        <button type="submit" class="btn btn-color btn-block">Submit</button>
      </form>
    </div>
  </div>

0 个答案:

没有答案