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!

@Tumen_t yes I have. Unless my implementation is wrong. When I've added it just below minlength: 3 field (separated by comma), it disabled the validation for other fields. — Friency Fernandez
– Friency Fernandez, Commented Feb 14, 2017 at 15:09
what about trimming the value in that field.. and if it is still blank.. what happens then? — Grizzly
– Grizzly, Commented Feb 14, 2017 at 15:14

fahad sulaiman · Accepted Answer · 2022-09-07 14:30:19Z

4

$(".form-auth-small").validate({
   rules: {
      username : {
          required: true,
          normalizer: function(value) {
                return $.trim(value);
            }
      }
   }
  });

use normalizer , in which it will trim or remove all whitespaces.

simple solution.enjoy your day

edited Sep 7, 2022 at 14:30

answered Jul 26, 2018 at 11:37

fahad sulaiman

736 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harsha Biyani Over a year ago

Please add some explanation even though code is explanatory.

Ronnie Over a year ago

To save someone a search, this is what normalizer does jqueryvalidation.org/normalizer "Prepares/transforms the elements value for validation."

Rana Ghosh · Accepted Answer · 2017-02-14 15:23:55Z

3

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.

edited Feb 14, 2017 at 15:23

answered Feb 14, 2017 at 15:06

Rana Ghosh

4,6745 gold badges25 silver badges40 bronze badges

5 Comments

Friency Fernandez Over a year ago

I will try this out.

Rana Ghosh Over a year ago

try both these in one time.

Friency Fernandez Over a year ago

Okay I will. Thank you!

Friency Fernandez Over a year ago

I got it to work thank you! I had to do both of the methods. I'm accepting your answer since you posted first.

Friency Fernandez Over a year ago

Can I ask? How to make it only disallow spaces at the start and end, not in between characters?

Tumen_t · Accepted Answer · 2017-02-14 15:08:41Z

3

Try this

$(document).ready(function() {
  jQuery.validator.addMethod("noSpace", function(value, element) { 
     return value.indexOf(" ") < 0 && value != ""; 
}, "No space");


$(".form-auth-small").validate({
   rules: {
      username : {
          noSpace: true
      }
   }
  });


})

answered Feb 14, 2017 at 15:08

Tumen_t

8016 silver badges14 bronze badges

2 Comments

Tumen_t Over a year ago

Look at this demo. It is almost identical to what you have. jsbin.com/akero3/52/edit?html,js,output

Friency Fernandez Over a year ago

This works thanks. But it's the same as Rana's answer. I had to accept his answer instead since he posted two minutes earlier.

Collectives™ on Stack Overflow

JQuery validation accepts even if input contains only whitespaces

3 Answers 3

2 Comments

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related