时间戳

首页 > 解决方案 > 样式类似于 input 标签的 required 属性附带的弹出窗口

html - 样式类似于 input 标签的 required 属性附带的弹出窗口

问题描述

我的网站上有一个表格。我对某些字段使用 required ，当字段在提交时没有价值时会弹出一个窗口。我有一个名为手机号码的字段，我使用 javascript 检查输入的号码是否有效。如果号码无效，我想显示一个类似的弹出窗口，如所需的自定义消息（“手机号码无效”）所示。那么我该如何设计它或者有什么方法可用？

<form action="." method="post" onsubmit="return validat()">
   <div class="form-group">
      <input class="form-control valid" name="conmobile" id="mobilenumber" type="tel" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your Mobile Number'" placeholder="Enter your Mobile Number" required>
   </div>
</form>

标签： htmlcss

解决方案

Please try this.

setCustomValidity() used to change default message in a required input field in a form.

oninput() event add a custom message

 oninput="this.setCustomValidity('Enter atleast 10 digit.')"

oninvalid() event add a custom message

 oninvalid="this.setCustomValidity('Mobile Number invalid..')"  


<form action="">
  <label for="phone">Mobile Number:</label>
  <input type="tel" id="mobile" name="phone" placeholder="1234567890" pattern="[0-9]{3}[0-9]{3}[0-9]{4}" oninvalid="this.setCustomValidity('Mobile Number invalid')"
    oninput="this.setCustomValidity('Enter atleast 10 digit.')"  required><br><br>
  <input type="submit" value="submit">
</form>

推荐阅读