如何显示像验证弹出窗口一样的弹出窗口？

Question

在未填写必填字段的表单验证时，将显示HTML5弹出窗口：

我希望在数据库中已存在登录时显示类似的弹出窗口。如何相对于登录字段显示弹出窗口？

Answer 1

.wrapper{
    position: relative;
}

.hint{
    position: absolute;
    left: 50%;
}


<div class="wrapper">
    <input type="text">
    <div class="hint">Login exists</div>
</div>

此外，您必须使用AJAX检查登录是否存在。

Answer 2

让你的表格

    <form>
        <input type="text" id="one" required />   
       <input type="submit" id="sub"></input>
   </form>

和jquery

  $(document).ready(function(){   
  $('#sub').on('click',function(){  
      var getName=$('#one').val();
      //let's assume after checking name, it already exist then go in if condition
      if(true){
      $('#one').val('');
       $('#one').attr('data-errormessage-value-missing','already exist'); 
  }
  });
});

DEMO