when input is not empty, getElementById return null

Question

I am trying to make form validate in simple react app, but when I type something in input element and submit form it throw error can not read value of null, when that same input is empty getElementById return that input... I can not figure out what is wrong, I am new as a developer

import styles from './RegisterForm.module.css'

import { Link } from 'react-router-dom'



const RegisterForm = () => {

const name = document.getElementById('name');

const surname = document.getElementById('surname');

const company = document.getElementById('company');


const address = document.getElementById('address');

const city = document.getElementById('city');

const state = document.getElementById('state');

const zip = document.getElementById('zip');

const phone = document.getElementById('phone');

const email = document.getElementById('email');

const password = document.getElementById('password');

const confirm = document.getElementById('confirm');
    
const validation = e => {

    e.preventDefault();

    console.log(name);

    if(name.value === '') {
        name.className = styles.error;
        name.focus();
    }
}

    return(
        <div className ={styles.main}>
            <div className className = {styles.subdiv}>
                <div className = {styles.title}>First App</div>
                <h1 className = {styles.welcome}>Welcome</h1>
                <p className = {styles.createAccount}>Create your account</p>
                <form id="myForm" type = "submit" className = {styles.form}  onSubmit={validation}>
                    <input id="name" type="text" placeholder = "First name"/>
                    <input id="surname" type="text" placeholder = "Last name"/>
                    <input id="company" type="text" placeholder = "Company"/>
                    <input id="address" type="text" placeholder = "Address"/>
                    <input id="city" type="text" placeholder = "City"/>
                    <input id="state"type="text" placeholder = "State"/>
                    <input id="zip" type="text" placeholder = "Zip Code"/>
                    <input id="phone" type="number" placeholder = "Phone"/>
                    <input id="email" type="email" placeholder = "Email"/>
                    <input id="password" type="password" placeholder = "Enter your password"/>
                    <input id="confirm" type="password" placeholder = "Confirm your password"/>
                    <button className = {styles.button}>Register</button>
                </form>
                <div className = {styles.lastDiv}><p>Already have an account?</p><Link to="/"><a href="">Login!</a></Link></div>
            </div>
        </div>
    )
}

export default RegisterForm;

score 0 · Answer 1 · answered Jun 14 '21 at 20:30

Though most use of "real" dom must be avoided, you can get the element inside event handler.

Alternative: use state to track changes and validate them on submit(related: Reactjs - Form input validation)

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <style type="text/css">
      .valid { background-color: white }
      .invalid { background-color: red }
      
      input { margin: .5rem }
      
      span.valid { display: none }
      span.invalid {
        background-color: inherit;
        color: red;
      }
    </style>
  </head>
  
  <body>
    <div id="root"></div>
    <script type="text/babel">

const ng_name = name => "" === name
  
class RegForm extends React.Component {
  constructor(props){
    super(props)
    
    this.state = {
      valid_name: true,
    }
    
    this.onsub = e => {
      e.preventDefault()
      const n = document.getElementById("name")
      const ng = ng_name(n.value)
      const ok = ! ng
      this.setState({valid_name: ok})
    }
  }
  
  render(){
    const namecls = this.state.valid_name ? "valid" : "invalid"
    const cls_name_invl = this.state.valid_name ? "valid" : "invalid"
    
    return (<form id="frm" type="submit" onSubmit={this.onsub}>
      <span>Name</span>
      <input id="name" type="text" placeholder="First Name" className={namecls} />
      <span className={cls_name_invl}>Invalid name</span>
      <div><button>Register</button></div>
    </form>)
  }
}

const App = () => {
  return (<div className="main">
    <h1 className="title">First App</h1>
    <h2 className="welcome">Welcome</h2>
    <RegForm />
  </div>)
}

ReactDOM.render(
 <App />,
 document.getElementById('root')
);

    </script>
  </body>
</html>

when input is not empty, getElementById return null

1 Answers1