Here I provide my code where I want to enter characters into the password input field and I want to do not enter whitespace/space in it but it also going inside of it instead when I print input value then it does not contain space/whitespace. Please help me to resolve the issue.

CodeSandBox Demo

Code -

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { Form, Input, Label } from "semantic-ui-react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputFieldData: {
        pass: {
          val: "",
          error: false
        }
      }
    };
  }

  inputChange = e => {
    // prevent not to enter space charactes in password field while registering
    const re = /^\S*$/;
    let inputFieldData = this.state.inputFieldData;
    const name = e.target.name;
    if (re.test(e.target.value)) {
      inputFieldData[name]["val"] = e.target.value;
      console.log(e.target.value);
    }
    this.setState({ inputFieldData });
  };

  render() {
    const { inputFieldData } = this.state;

    return (
      <div className="App">
        <h1>Input box does not contain space in it</h1>
        <h3>Input Value: {inputFieldData["pass"]["val"]}</h3>
        <Form className="register-form">
          <Form.Field>
            <Input
              type="password"
              icon="user circle"
              name="pass"
              iconPosition="left"
              placeholder="Enter Password"
              onChange={this.inputChange}
              error={inputFieldData["pass"]["error"]}
            />
            {inputFieldData["pass"]["error"] && (
              <Label basic color="red" pointing>
                Field can not be empty
              </Label>
            )}
          </Form.Field>
        </Form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here I provide my code where I want to enter characters into the password input field and I want to do not enter whitespace/space in it but it also going inside of it instead when I print input value then it does not contain space/whitespace. Please help me to resolve the issue.

CodeSandBox Demo

Code -

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { Form, Input, Label } from "semantic-ui-react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputFieldData: {
        pass: {
          val: "",
          error: false
        }
      }
    };
  }

  inputChange = e => {
    // prevent not to enter space charactes in password field while registering
    const re = /^\S*$/;
    let inputFieldData = this.state.inputFieldData;
    const name = e.target.name;
    if (re.test(e.target.value)) {
      inputFieldData[name]["val"] = e.target.value;
      console.log(e.target.value);
    }
    this.setState({ inputFieldData });
  };

  render() {
    const { inputFieldData } = this.state;

    return (
      <div className="App">
        <h1>Input box does not contain space in it</h1>
        <h3>Input Value: {inputFieldData["pass"]["val"]}</h3>
        <Form className="register-form">
          <Form.Field>
            <Input
              type="password"
              icon="user circle"
              name="pass"
              iconPosition="left"
              placeholder="Enter Password"
              onChange={this.inputChange}
              error={inputFieldData["pass"]["error"]}
            />
            {inputFieldData["pass"]["error"] && (
              <Label basic color="red" pointing>
                Field can not be empty
              </Label>
            )}
          </Form.Field>
        </Form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

• javascript
• reactjs
• semantic-ui-react

• let's users type their password. Then, you can trim(password) before you call the API – Vu Luu Commented Mar 6, 2019 at 7:33
• You could simply detect a spacebar, refer this – Tushar Walzade Commented Mar 6, 2019 at 7:35
• I know, but I do not want to use trim(). I want to do not enter space character inside the input box. @VuLuu – Shubham Baranwal Commented Mar 6, 2019 at 7:36
• I tried your method before I posted this question but it didn't help me. @TusharWalzade – Shubham Baranwal Commented Mar 6, 2019 at 7:37

4 Answers 4

You need to use the controlled ponent pattern (see here https://reactjs/docs/forms.html#controlled-ponents) by adding the value prop to your input ponent.

You can then add the space trimming logic in your handleChange function.

Here is an example : https://codesandbox.io/s/kkpr53k36r

You need to set the value of the input to inputFieldData.pass.val,
otherwise it is not bound to the state of your ponent.

        <Input
          value={inputFieldData.pass.val}
          type="password"
          icon="user circle"
          name="pass"
          iconPosition="left"
          placeholder="Enter Password"
          onChange={this.inputChange}
          error={inputFieldData["pass"]["error"]}
        />

I solved this problem with regex

str.replace(/\s/g, '')

Simply do like this in handleOnChange Function:

 handleOnChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value.split(" ").join("")
    });
  };