JQuery validation accepts even if input contains only whitespaces

Question

I am having trouble validating if input fields contains only whitespaces. I have specified the required rule for the required fields but it still works if I just type spaces. also, noSpace rule for username field does not seem to work. It disables validation for the other fields. Here is my markup.

<form method=post class="form-auth-small" action="../php/controller/registration_controller.php">
  <div class="form-group row m-t-10px">
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>RANK: </h5></label>
      <select class="form-control" name="rank" required="required">
        <option value="rank1">NUP</option>
        <option value="rank2">PO1</option>
        <option value="rank3">PO2</option>
        <option value="rank4">PO3</option>
        <option value="rank5">SPO1</option>
        <option value="rank6">SPO2</option>
        <option value="rank7">SPO3</option>
        <option value="rank8">SPO4</option>
        <option value="rank9">PINSP</option>
        <option value="rank10">PSINSP</option>
        <option value="rank11">PCINSP</option>
        <option value="rank12">PSUPT</option>
        <option value="rank13">PSSUPT</option>
        <option value="rank14">PCSUPT</option>
        <option value="rank15">PDIR</option>
        <option value="rank16">PDDG</option>
        <option value="rank17">PDG</option>
      </select>
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>USERNAME: </h5></label>
      <input class="form-control" name="username" placeholder="Username must only contain characters [A-Z] and numbers [0-9]" type="text" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>FIRST NAME: </h5></label>
      <input class="form-control" name="fname" type="text" minlength="1" required="required">
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>PASSWORD: </h5></label>
      <input class="form-control" name="pwd" placeholder="Choose a strong password" type="password" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>MIDDLE NAME: </h5></label>
      <input class="form-control" name="mname" type="text" minlength="1" required="required">
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>EMAIL: </h5></label>
      <input class="form-control" name="email" type="email" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>LAST NAME: </h5></label>
      <input class="form-control" name="lname" type="text" minlength="1" required="required">
    </div>
  </div>
  <div class="form-group clearfix m-b-5px">
    <button type="submit" name="btnRegister" class="btn btn-primary btn-lg btn-block">REGISTER</button>
  </div>
  <div class="bottom m-b-15px">
    <span><i class="fa fa-lock"></i> <a href="login.php">Already have an account? Sign in.</a></span>
  </div>
</form>

JS (Without noSpace rule)

$(document).ready(function () {
$('.form-auth-small').validate({
  rules: { 
    rank: {
      required: true
    },
    username: {
      required: true,
      minlength: 3
    },
    fname: {
      required: true
    },
    mname: {
      required: true
    },
    lname: {
      required: true
    },
    pwd: {
      required: true
    },
    email: {
      required: true
    }
  },
  errorElement: "em",
  errorPlacement: function ( error, element ) {
    // Add the `help-block` class to the error element
    error.addClass( "help-block" );

    // Add `has-feedback` class to the parent div.form-group
    // in order to add icons to inputs
    element.parents( ".col-sm-5" ).addClass( "has-feedback" );

    error.insertAfter( element );

    // Add the span element, if doesn't exists, and apply the icon classes to it.
    if ( !element.next( "span" )[ 0 ] ) {
      $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
    }
  },
  success: function ( label, element ) {
    // Add the span element, if doesn't exists, and apply the icon classes to it.
    if ( !$( element ).next( "span" )[ 0 ] ) {
      $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
    }
  },
  highlight: function ( element, errorClass, validClass ) {
    $( element ).parents( ".col-sm-6" ).addClass( "has-error" ).removeClass( "has-success" );
    $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
  },
  unhighlight: function ( element, errorClass, validClass ) {
    $( element ).parents( ".col-sm-6" ).addClass( "has-success" ).removeClass( "has-error" );
    $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
  }
});
});

DEMO Thank you in advance!

Answer 1

Just add this method before your jQuery validate function run::

jQuery.validator.addMethod("noSpace", function(value, element) { 
    return value.indexOf(" ") < 0 && value != ""; 
  }, "No space please and don't leave it empty");

AND use

noSpace: true

for each field you want.