Проверка формы перед отправкой и во время ввода данных

Я начал изучать React и хотел создать форму для нескольких входов, где я мог бы проверять валидацию данных во время ввода и еще раз перед отправкой формы. Условия подачи: все поля обязательны, данные действительны.

В настоящее время, если пользователь вводит недопустимые данные в поле ввода, текст ошибки отображается рядом с тем же полем. И если пользователь нажал кнопку «отправить» в форме с пустыми полями, также отображается текст ошибки.

Но я не могу понять, как мне выполнить проверку перед отправкой формы в моем примере:: форма имеет поле ввода с ошибкой или нет.

import React from 'react'
import { render } from 'react-dom'

const ErrorOutput = props => {
  let name = props.name
  let inputValue = props.case
  let submit = props.submit
  console.info(props.submit)
  if (name === 'firstName') {
    if (!inputValue.match(/^[a-zA-Z]+$/) && inputValue.length > 0) {
        return <span>Letters only</span>
      } else if (submit && inputValue.length === 0) {
        return <span>Required</span>
      }
    return <span></span>
  }
  if (name === 'telNo') {
    if (!inputValue.match(/^[0-9]+$/) && inputValue.length > 0) {
        return <span>Numbers only</span>
      } else if (submit && inputValue.length === 0) {
        return <span>Required</span>
      }
    return <span></span>
  }
}

class App extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      firstName: '',
      telNo: '',
      submit: false
    }
  }

  handleSubmit(e){
    e.preventDefault()
    let submit = true
    this.setState ({submit: submit})
    // ... Validation
  }

  handleValidation(e) {    
    this.setState({
      [e.target.name]: e.target.value 
    })  
  }

  render() {
    return (
      <form onSubmit = {this.handleSubmit.bind(this)}>
        <div>
          <label>
            First name:
          </label>
          <input
            type='text'
            name ='firstName'
            value = {this.state.firstName}
            onChange = {this.handleValidation.bind(this)}
          />
          <ErrorOutput case = {this.state.firstName} name = {'firstName'} submit = {this.state.submit} />
        </div>
        <div>
          <label>
            Phone number:
          </label>
          <input
            type='tel'
            name ='telNo'
            value = {this.state.telNo}
            onChange = {this.handleValidation.bind(this)}
          />
          <ErrorOutput case = {this.state.telNo} name = {'telNo'} submit = {this.state.submit} />
        </div>
        <button>
          Submit
        </button> 
      </form>
    )
  }
}

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

forms reactjs validation jsx

24.05.2018 10:50

JS - События опций формы

В продолжение предыдущей статьи CSS - стили, связанные с вводом формы , в этой статье мы будем использовать JS для взаимодействия с формами, на этот...

CSS - Стили, связанные с вводом формы

Общими стилями ввода для форм являются Input (включая Text, Radio, checkbox), Select и Textarea, из которых Input относительно прост, поэтому в этой...

Создание многостраничной формы заявления о приеме на работу с помощью Angular

Наличие на корпоративном сайте форм заявлений о приеме на работу, или "трудовых анкет", экономит время и деньги как для соискателей, так и для...

Проверка дублирующего ввода с помощью этой простой функции JavaScript

Это моя html форма, обернутая в таблицу:

2 943

Ответы 2

следующий код является примером добавления данных через форму и проверку формы перед отправкой. Могут быть добавлены другие проверки.

class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
  name: '',
  age: '',
  email: '',
  errorName: '',
  errorAge: '',
  errroMail: '',
  dataValue: false
};
this.getName = this.getName.bind(this);
this.getAge = this.getAge.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.postDatainDisplay = this.postDatainDisplay.bind(this);
}

componentWillReceiveProps(nextProps) {
    if (this.props.name !== nextProps.name) {
        this.setState({ dataValue: true });
    }
}
postDatainDisplay(dataObj) {
    this.props.postData(dataObj);
}
getName(event) {
    const { name, age } = this.state;
    this.setState({ errorName: '' });
    this.setState({ name: event });
}
getAge(event) {
   const { age } = this.state;
   this.setState({ errorAge: '' });
   this.setState({ age: event });
}
handleSubmit() {
const { name, age } = this.state;
//add more validation here 
if (name === '') {

  this.setState({ errorName: 'name cannot be blank', dataValue: false 
});

} else if (age === '') {

  this.setState({ errorAge: 'Age cannot be blank', dataValue: false });
} else
{     this.setState({ data: { name, age } }, () => {
      this.props.sendData(this.state.data);
}
render() {
const { name, age } = this.props;
return (
  <div className = "container">
    <form>
      name:<input
        type = "text"
        onChange = {event => {
          this.getName(event.target.value);
        }}
      />
      {this.state.errorName}
      <br />
      <br />
      age:{' '}
      <input
        type = "text"
        onChange = {event => {
          this.getAge(event.target.value);
        }}
      />
      {this.state.errorAge}
      <br />
      <br />
       <input type = "button" onClick = {this.handleSubmit} value = "Submit" 
       />
    </form>
    </div>

Да, но в этом примере вы можете проверить валидацию только после отправки. Но я хочу создать форму, в которой я могу проверить валидацию во время ввода данных и после нажатия кнопки «отправить» без необходимости повторять правила валидации в handleChangeEvent и handleSubmit.

— 24.05.2018 12:34

24.05.2018 11:54

class App extends React.Component {
  constructor(props){
    super(props)    
    this.state = {
        form:{
            firstName: {
              value: '',
              validation: {
                required: true
              },
              valid: false,
              touched: false
            },
            telNo: {
              value: '',
              validation: {
                required: true
              },
              valid: false,
              touched: false
            }
         },
         formIsValid:false
      }
    }
    checkValidity(value, rules) {
        let isValid = true;

        if (rules.required) {
          isValid = value.trim() !== '' && isValid;
        }
        return isValid;
      }

    handleValidation = (event) => {
        let fieldName = event.target.name;
        let fieldValue = event.target.value;
        const updatedCategoryForm = {
          ...this.state.form
        };
        const updatedFormElement = {
          ...updatedCategoryForm[fieldName]
        };
        updatedFormElement.touched = true;
        updatedFormElement.value = fieldValue;
        updatedFormElement.valid = this.checkValidity(updatedFormElement.value, updatedFormElement.validation);
        if (!updatedFormElement.valid && updatedFormElement.validation ) {
          updatedFormElement.elementValidation = "Invalid";
        } else {
          updatedFormElement.elementValidation = "";
        }
        updatedCategoryForm[fieldName] = updatedFormElement;

        let formIsValid = true;
        for (let inputIdentifier in updatedCategoryForm) {
          formIsValid = updatedCategoryForm[inputIdentifier].valid && formIsValid;
        }
        this.setState({ form: updatedCategoryForm, formIsValid: true });
      }

На основе значения поля formIsValid отключить кнопку отправки

24.05.2018 11:56