Not allowing to write spaces in input using Javascript

Question

I've been searching for a lot of functions that let me block the user from writing spaces on my input BUT I can't seem anyone that actually works with me.. Maybe I'm not just doing it the right way and I'd appreciate a little help.

This is my HTML form:

<table>
<form name="form_registar" method="post" action="registado.php" onsubmit="return validateForm()">
    <tr>
      <td colspan="2" align="center">
        <input type="text" name="user" placeholder="Nome de Utilizador" id="textboxEmail" maxlength="20">
      </td>
    </tr>
    <tr>
      <td>
        <input type="password" name="pw" placeholder="Password" id="textbox" maxlength="15">
      </td>
      <td>
        <input type="password" name="cpw" placeholder="Confirmar Password" id="textbox" maxlength="15">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="nome" placeholder="Nome" id="textbox" onkeypress="return isLetter(event)" maxlength="15">
      </td>
      <td>
        <input type="text" name="apelido" placeholder="Apelido" id="textbox" onkeypress="return isLetter(event)" maxlength="15">
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <input type="text" name="email" placeholder="E-mail" id="textboxEmail" maxlength="50">
      </td>
    </tr>
    <tr>
      <td>
        Data de Nascimento:
      </td>
      <td>
        <input type="date" name="dataNasc" id="textbox">
      </td>
    </tr>
    <tr>
      <td>
        Masculino<input type="radio" name="sex" value="M" checked>
      </td>
      <td>
        Feminino<input type="radio" name="sex" value="F">
      </td>
    </tr>
    <tr>
      <td>
        <button type="submit" class="submit-button"><b>Registar</b></button>
      </td>
  </form>
  <form action="index.html">
  <td>
  <button type="submit" class="submit-button">Cancelar</button>
  </td>
  </form>
  </tr>
</table>

And I want to block the user to write spaces in one or more input fields. I can't sem to know how.

EDIT: isLetter and isNumber are functions to only allow the user to write letters and numbers respectively.

ADDITIONAL INFO: This is my javascript functions, I'm looking for one that blocks the user from writing spaces:

/* APENAS PERMITE NUMEROS */
 function isNumber(evt) {
         evt = (evt) ? evt : window.event;
         var charCode = (evt.which) ? evt.which : evt.keyCode;
         if (charCode > 31 && (charCode < 48 || charCode > 57)) {
             return false;
         }
         return true;
     }
     /* APENAS PERMITE LETRAS */
 function isLetter(evt) {
         evt = (evt) ? evt : event;
         var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
             ((evt.which) ? evt.which : 0));
         if (charCode > 31 && (charCode < 65 || charCode > 90) &&
             (charCode < 97 || charCode > 122)) {
             return false;
         }
         return true;
     }
     /* VALIDAR O FORM */
 $(function chora() {
     $('#user').on('keypress', function chora(e) {
         if (e.which == 32)
             return false;
     });
 });

 function validateForm() {
     /* USERNAME */
     var a = document.forms["form_registar"]["user"].value;
     if (a == null || a == "") {
         alert("O Username não está preenchido.");
         return false;
     }
     /* PASSWORD */
     var b = document.forms["form_registar"]["pw"].value;
     if (b == null || b == "") {
         alert("A password não está preenchida.");
         return false;
     }
     /* CONFIRMAR PASSWORD */
     var c = document.forms["form_registar"]["cpw"].value;
     if (c == null || c == "") {
         alert("A confirmação de password não está preenchida.");
         return false;
     }
     /* NOME */
     var d = document.forms["form_registar"]["nome"].value;
     if (d == null || d == "") {
         alert("O nome não está preenchido.");
         return false;
     }
     /* APELIDO */
     var e = document.forms["form_registar"]["apelido"].value;
     if (e == null || e == "") {
         alert("O apelido não está preenchido.");
         return false;
     }
     /* EMAIL */
     var f = document.forms["form_registar"]["email"].value;
     var atpos = f.indexOf("@");
     var dotpos = f.lastIndexOf(".");
     if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= f.length) {
         alert("O E-mail não se encontra devidamente preenchido.");
         return false;
     }
     /* DATANASC */
     var g = document.forms["form_registar"]["dataNasc"].value;
     if (g == null || g == "") {
         alert("A Data de Nascimento não está preenchida.");
         return false;
     }
     /* CONFIRMAÇAO PW*/
     var h = document.forms["form_registar"]["pw"].value;
     var i = document.forms["form_registar"]["cpw"].value;
     if (h != i) {
         alert("As passwords não correspondem.");
         return false;
     }

 }

look up regular expression and make use of them to check that no input data contains space. — Kraken
– Kraken, Commented Apr 29, 2014 at 8:01
I suggest you listen to keydown or change event on all input fields and clear the contents in case those fail validations — Akash
– Akash, Commented Apr 29, 2014 at 8:02
possible duplicate of How to prevent spaces and full stops in input field with javascript — Niklas
– Niklas, Commented Apr 29, 2014 at 8:23

Pieter Coucke · Accepted Answer · 2014-04-29 08:08:06Z

1

I suggest you have a look at jQuery. Then you can use this:

$('#textbox').on('keydown',function(){
  var $this = $(this);
  var value = $this.val();
  $this.val(value.replace(/\s+/g,'')); // remove all whitespace characters
});

Also, you have multiple elements with id "textbox". Each id should be unique.

answered Apr 29, 2014 at 8:08

Pieter Coucke

4385 silver badges13 bronze badges

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

1 Comment

Pieter Coucke Over a year ago

IDs should really be unique in a document. You can use css classes to achieve the same formatting: <input class="textbox"/>

SSS · Accepted Answer · 2014-04-29 09:00:14Z

1

I have made a Jsfiddle for the same. Have a look here.

I have used 'keyCode' and 'which' function. This will work on browsers and IOS ipad and iphone but not on Android Phones. They dont register 'KeyCode' or 'which' or 'keyChar'

var keycode;
$('.nospace').keypress(function (event) {
   keycode = (event.charCode) ? event.charCode : ((event.which) ? event.which : event.keyCode);
   if (keycode == 32) {
    return false
  };
});

Check the jsfiddle link. http://jsfiddle.net/shinde87sagar/P5Kjr/4/

answered Apr 29, 2014 at 9:00

SSS

1,0257 silver badges17 bronze badges

Comments

Rafał Walczak · Accepted Answer · 2014-04-29 08:01:03Z

0

onkeypress is too late. Try onkeydown.

answered Apr 29, 2014 at 8:01

Rafał Walczak

5435 silver badges11 bronze badges

1 Comment

max taldykin Over a year ago

This looks like a comment. Try to extend your answer with more explanation or examples.

Daanvn · Accepted Answer · 2014-04-29 08:04:15Z

0

You could prevent the users to use the spacebar by checking if its pressed and then returning false like this:

$("input").on("keydown", function (e) {
    return e.which !== 32;
});

Take a look at this working example

answered Apr 29, 2014 at 8:04

Daanvn

1,2666 gold badges27 silver badges42 bronze badges

2 Comments

White8Tiger Over a year ago

And where do I write that? How do I "call" the function to the form?

Daanvn Over a year ago

@White8Tiger Just add it to your javascript code? Like this?

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Working fiddle

jQuery Code

$("input").on({
    keydown: function (e) {
        if (e.which === 32) return false;
    },
    change: function () {
        this.value = this.value.replace(/\s/g, "");
    }
});

Reference

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 29, 2014 at 8:06

Bhavik

4,9044 gold badges32 silver badges45 bronze badges

Collectives™ on Stack Overflow

Not allowing to write spaces in input using Javascript

5 Answers 5

1 Comment

Comments

1 Comment

2 Comments

Working fiddle

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related