如何更改html错误消息验证的位置

Question

Having trouble in the html validation because of how its position tried removing table and resizing the input text box still the same out of position

addform.php

here is the form tried to resize the input textbox but still the error validation message is still out of position

   <style type="text/css">
  #dis{
   display:none;
  }


  </style>




    <div id="dis">
    <!-- here message will be displayed -->
    </div>


 <form method='post' id='emp-SaveForm' action="#">

<table class='table table-bordered'>

    <tr>
        <td>First Name</td>
        <td><input type='text' name='fname' class='form-control' 
        pattern ="[a-zA-Z]+"
        title="First Name should only contain letters"


         required /></td>

    </tr>

    <tr>
        <td>Last Name</td>
        <td><input type='text' name='lname' class='form-control'  required></td>
    </tr>

    <tr>
        <td>Contact Number</td>
        <td><input type='number' name='contactnum' class='form-control'  required></td>
    </tr>

     <tr>
        <td>Email</td>
        <td><input type='email' name='email' class='form-control' required /></td>
    </tr>

     <tr>
        <td>Password</td>
        <td><input type="password" name='pass' class='form-control'  required /></td>
    </tr>

     <tr>
        <td>Language</td>
        <td><input type='text' name='lang' class='form-control'  required /></td>
    </tr> 
    <tr>
        <td colspan="2">
        <button type="submit" class="btn btn-primary" name="btn-save" id="btn-save">
        <span class="glyphicon glyphicon-plus"></span> Save this User
        </button>  
        </td>
    </tr>

</table>

still new in doing front end hope you can help me thanks

Answer 1

I think it needs a position:absolute, then you can move it anywhere you'd like on the page.

 #dis {
       position: absolute;
       margin-left: auto;
       margin-right: auto;
    }