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>

Answer 2

If you're not particular on jQuery here is another super easy way to do what you want.

The main thing is to have the error message and classes defined.

Here is an example in MagJS

JS:

var props = {
  message: 'can\'t be empty',
  title: ''
}

mag.module("validate", {

  view: function(state, props) {

    state.title = state.title || props.title;

    state.form = {
      _onchange: function() {
        this['submit'].focus()
      }
    }

    state.button = {

      _onclick: function() {

        if (state.title.length < 1) {

          state.error = {
            _text: props.message,
            _class: 'label error'
          }

          state.input = {
            _class: 'error'
          }

        }
      }
    }
  }
}, props)

HTML:

<div id="validate">
 <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">
              <span class="label error hide"></span>
              </br>
              <button class="btn btn-edit btn-sm pull-right" id="reserveroom" name="submit">Book Meeting Room Now!</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</form>

Here is the link to the working example: http://jsbin.com/kohomupuhu/1/edit?html,js,output

Hope that helps!