jquery form validate not allow space for username field?

Question

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

• Reigel Gallarde: I think required: true, is already in that...
• tree em: no it allow space.More you can test here jquery.bassistance.de/validate/demo
• Reigel Gallarde: tested the link and yes it work as expected...it say's This field is required. when I inputted spaces and hit submit button...
• Reigel Gallarde: ahhh I think you mean, accept reigel as input but not reigel gallarde cause it has a space in between?..
• tree em: for example : username: Reigel >>ok username: Rei gel >>Not allow

Answer 1

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.

• tree em: Thankssss so much,this is really what i am looking for,
• user1006565: but I am using "required:true" also so it displays "please enter a value" msg instead of "No space please and don't leave it empty"

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

example like this :

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

Answer 7

$.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
 }
 }
});