Prevent a White Space in the Beginning of a Input

var field = document.querySelector('[name="username"]');
field.addEventListener('keypress', function ( event ) {     var key = event.keyCode;    if (key === 32) {      event.preventDefault();    }});

<input type="text" name="username" />

How to prevent white space only from going to the database?

Try this regex, and it will allow for one whitespace only. Otherwise, it will be removed.

var regex = /\s\s+/gi;
input.value = input.value.replace(regex, "");

And if you need to remove all whitespaces, you can try

input.value.replace(/\s/g,'')

how to remove white space from first and last in react

using regex the following should work, you can test it at regex101:

e.target.value = e.target.value.replace(/^[ \t]+|[ \t]+$/gm, "");

the cleaner solution would be what sojin suggested

e.target.value = e.target.value.trim()

Remove whitespace at the beginning of a text

you can create a custom validator

public noWhitespaceValidator(control: FormControl) {
    const isWhitespace = (control.value || '').trim().length === 0;
    const isValid = !isWhitespace;
    return isValid ? null : { 'whitespace': true };
}

and pass that to form control

new FormControl('', [Validators.required, this.noWhitespaceValidator]);

in html

<span *ngIf="createForm.controls.name.hasError('whitespace')">Name Cannot contain only spaces</span>

this will show error if name field contains only spaces

or if you want to remove spaces in real time instead of showing error, you can use valuechanges

this.createForm.controls.name.valueChanges().subscribe(res = {
    this.createForm.controls.name.setValue((res || '').trim());
})

How to prevent user to enter space at the beginning in textbox?

Since you tagged your question with jquery-validate. Here an Answer how to do it with jquery:

For more Information take a look at: http://docs.jquery.com/Plugins/Validation

<script type="text/javascript">
  $.validator.addMethod("NoWhiteSpaceAtBeginn", function(value, element) {
    return this.optional(element) || /^[^\t].*/.test(value);
  }, "Must not begin with a whitespace");
  $(document).ready(function(){
    $("#form1").validate();
  });
</script>

/^[^\t].*/ checks if the string starts with any character but a space, if you want to exclude all white spaces use /^[^\s].*/ instead.
And now add the required and NoWhiteSpaceAtBeginn as class names to the fields you want to validate.

<form name="form1" id="form1" action="index.php" method="post">
  <table align="right" border="0">
    <tr>
      <td>First Name:</td>
      <td><input id="fName" name="fName" type="text" class="input-login required NoWhiteSpaceAtBeginn"/></td>
    </tr>
    <tr><td>Email Address:</td></tr>
    <tr><td><input id="email" name="email" type="text" class="input-login required NoWhiteSpaceAtBeginn email"/></td></tr>
    <tr><td>Password:</td></tr>
    <tr><td><input id="password" name="password" type="password" class="input-login"/>/td></tr>
    <tr><td align="center"><a href="#">Forgot password</a></td></tr>
    <tr>
      <td align="center"><input name="login" id="login" type="submit" value="Login" > <input name="signup" id="signup" type="submit" value="SignUp" ></td>
    </tr>
  </table>
</form>

A good tutorial can be found here: http://corpocrat.com/2009/07/15/quick-easy-form-validation-tutorial-with-jquery/

How to avoid using white space in react input field, when "onChange" is already reserved for different function?

Observed that, for the onKeyDown you are not binding the event to this.

onKeyDown= {this.AttributeValidation.bind(
this,
sprNotDeleted.value
)}

<input
    type="text"
    className="form-control"
    value={sprNotDeleted.value}
    onKeyDown= {this.AttributeValidation.bind(
    this,
    sprNotDeleted.value
    )}
    onChange={this.inputChanged.bind(
    this,
    sprNotDeleted.id
    )}
/>

As you are accessing the this scope recommending to use this bind()

Instead of handling through onKeyDown() can you try using pattern regex handling as its a input type text you can handle it through pattern itself?

<input 
    type="text" 
    pattern="[^\s]+"
/>

Happy Coding!!

---

Related Topics