CODEWITHSUNDEEP
jquery
tree em
tree em

Reputation: 21701

jquery form validate not allow space for username field?

I have used http://bassistance.de/jquery-plugins/jquery-plugin-validation/

my form validate :

$("#form_person").validate({
    rules: {


        username: {
            required: true,
            minlength: 2,
            maxlength:15
        },
        password: {
            required: true,
            minlength: 2
        },
        confirm_password: {
            required: true,
            minlength: 2,
            equalTo: "#password"
        },
        email: {
            required: true,
            email: true
        }

    },
    messages: {

        username: {
            required: "Please enter a username",
            maxlength:"max length 15 digits",
            minlength: "Your username must consist of at least 2 characters"
        },
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        },
        confirm_password: {
            required: "Please provide a confirm password",
            minlength: "Your password must be at least 5 characters long",
            equalTo: "Please enter the same password as above"

    }
});

Anybody help me to validate not allow space on username?

thanks

Upvotes: 19

Views: 86341

Answers (7)

Gauravbhai Daxini
Gauravbhai Daxini

Reputation: 2190

$.validator.addMethod("validUsername", function (value, element) {
    return /^[a-zA-Z0-9_.-]+$/.test(value);
}, "Please enter a valid username");

Add this method in validation

$("form").validate({
   rules: {
      name: {
          validUsername: true
      }
   }
});

Upvotes: 1

Nic Nilov
Nic Nilov

Reputation: 5156

Since jquery-validation 1.15.0 a cleaner approach is to use the normalizer callback:

$( "#myform" ).validate( {
  rules: {
    field: {
      required: true,
      normalizer: function( value ) {
        return $.trim( value );
      }
    }
  }
} );

The normalizer (immutably) transforms the value before the validation takes place.

See the Normalizer Docs for more details.

Upvotes: 2

Amit Meena
Amit Meena

Reputation: 161

example like this :

   $('#username').keypress(function( e ) {
       if(e.which === 32) 
         return false;
    });

Upvotes: 1

Orlando
Orlando

Reputation: 277

Take a look to aditional methods, there is a nowhitespace rule.

Upvotes: 12

Roy Shoa
Roy Shoa

Reputation: 3195

I just add the onfocusout event and its automatically Trim all the form fields and also if the user will enter only spaces (white-spaces) it will remove them and will show the field required message: 

onfocusout: function (element, event) {

    //Get Objects
    $element = $(element);

    //Remove whitespace
    if ( $element.is(':input') && !$element.is(':password') ) {
        $element.val($.trim($element.val()));
    }
},

Its working also when the user submit the form directly because when he click the submit button the event is triggered.

Upvotes: 2

Ardalan Shahgholi
Ardalan Shahgholi

Reputation: 12555

I used the answer of @Reigel but it didn't work for me.

I have change his example like this :

  $(document).ready(function(){

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


    $("form").validate({
       rules: {
          name: {
              noSpace: true
          }
       }
    });


  })

In my opinion noSpace isn't responsible to verify empty TextBox(Input). It is responsible to check value if some things was entered.

And it will be a good idea if you use jQuery.validator.addMethod... in other JS file and add this JS file to your master page or some things like that.

Upvotes: 12

Reigel Gallarde
Reigel Gallarde

Reputation: 65254

you can try something like this:

$(document).ready(function(){

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


$("form").validate({
   rules: {
      name: {
          noSpace: true
      }
   }
  });


})

quick demo
more on addMethod here
and an example also here.

Upvotes: 63

Related Questions