Showing messages error in a blank text field

Question

I have a problem showing an error message if the text field is blank. I want a simple message, eg "can't be empty". Once user click button submit and there are several blank text fields then system should be show error message "can't be empty" below the text field and the text field also should be turn red color.

What happen now is, when I click button submit then the system only focus on the blank text field but no error message and the text field is blue color.

this my form:

<form id="myForm2" action="addnewreservation.php" method="post">
  <div class="panel panel-default is-header">
      <div class="panel-body">

        <table class="table table-bordered">
          <tbody>
            <tr>
                <td>Title </br>
                <input class="form-control" name="title" type="text"></br>
                <button class="btn btn-edit btn-sm pull-right" id="reserveroom" type="submit" name="submit">Book Meeting Room Now!</button>
                </td>
            </tr>
          </tbody>
        </table>

      </div>

  </div>
</form>

this is script:

$(document).ready(function(){
 $('#myForm2').formValidation({
    message: 'This value is not valid',
        icon:{
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{
            title: {
                validators: {
                    notEmpty: {
                        message: 'can\'t be empty'
                    }
                }
            }

        }
   })
});



 $('#myForm2').change(function(e) {
    $('reserveroom').focus();
});

Answer 1

You should use jQuery validation plugin. It should do the trick.

http://jqueryvalidation.org/

Some code example:

<form id="myForm2" action="addnewreservation.php" method="post">
    <div class="panel panel-default is-header">
      <div class="panel-body">

        <table class="table table-bordered">
          <tbody>
            <tr>
             <td>Title </br>
              <input class="form-control" name="title" type="text" required></br>
              <button class="btn btn-edit btn-sm pull-right" id="reserveroom" type="submit" name="submit">Book Meeting Room Now!</button>
             </td>
            </tr>
          </tbody>
        </table>

      </div>

    </div>
</form>

And then just

$(document).ready(function(){
   $('#myForm2').Validate();
});

EDIT:

Of course dont forget to include plugin file right after calling jQuery script

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>