Проверка по автоматически заполненному полю в форме не работает - ReactJS - PullRequest
Новая
       19

Проверка по автоматически заполненному полю в форме не работает - ReactJS

0 голосов
/ 24 апреля 2020

У меня есть форма, настроенная для проверки всех полей. Для проверки я проверяю, имеет ли каждое входное значение required, необходимые значения max length и min length. После завершения я делаю окончательную проверку, чтобы убедиться, что вся форма действительна.

Вышеупомянутые проверки работают для полей, где пользователь физически вводит данные в поле ввода (именно так говорилось в учебнике, который я читал Это). Однако я изменил поле ввода Country и поле ввода Email, чтобы они были предварительно заполнены. Country содержит строку по умолчанию England,UK, а поле электронной почты предварительно заполнено электронной почтой, которую пользователь заполнил при регистрации из состояния this.props.email. Теперь моя форма возвращается как valid , если я что-то наберу в эти два поля рядом с предварительно заполненными данными ... после многих часов отладки я не могу понять, почему ...

См. Код ниже: 

state = {
    orderForm: {
      name: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "Your Name"
        },
        value: "",
        validation: {
          required: true 
        },
        valid: false,
        touched: false
      },
      postCode: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "PostCode"
        },
        value: "",
        validation: {
          required: true,
          minLength: 5,
          maxLength: 8
        },
        valid: false,
        touched: false
      },
      country: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "Country"
        },
        value: "England, UK",
        validation: {
          required: true
        },
        valid: false,
        touched: false
      },
      email: {
        elementType: "input",
        elementConfig: {
          type: "email",
          placeholder: "Your E-Mail"
        },
        value: this.props.email,
        validation: {
          required: true
        },
        valid: false
    },
    formIsValid: false
  };

    inputChangedHandler = (event, inputIdentifier) => {
        const updatedOrderForm = {
          ...this.state.orderForm 
        };
        const updatedFormElement = {
      ...updatedOrderForm[inputIdentifier] 
      };
    updatedFormElement.value = event.target.value; 
    updatedFormElement.valid = checkValidity(
      updatedFormElement.value,
      updatedFormElement.validation
    );

    updatedFormElement.touched = true; // ensures that the user types something in the input field
    updatedOrderForm[inputIdentifier] = updatedFormElement; 


    let formIsValid = true;
    for (let inputIdentifier in updatedOrderForm) {
      formIsValid = updatedOrderForm[inputIdentifier].valid && formIsValid;
    }

    this.setState({ orderForm: updatedOrderForm, formIsValid: formIsValid });
  };

  render() {

    const formElementsArray = [];
    for (let key in this.state.orderForm) {
      formElementsArray.push({
        id: key,
        config: this.state.orderForm[key]
      });

    }
    let form = (
      <form>
        {formElementsArray.map(formElement => {
          return (
            <Input
              inputtype={formElement.config.elementType}
              key={formElement.id}
              elementType={formElement.config.elementType}
              elementConfig={formElement.config.elementConfig}
              value={formElement.config.value}
              invalid={!formElement.config.valid}
              shouldValidate={formElement.config.validation}
              touched={formElement.config.touched}
              changed={event =>
                this.inputChangedHandler(
                  event,
                  formElement.id,
                  formElement.config.value
                )
              }
            />
          );
        })}
        <Button
          clicked={this.orderHandler}
          btnType="Success"
          disabled={!this.state.formIsValid}
        >
          PLACE ORDER HERE
        </Button>
      </form>
    );```

  validation function

export const checkValidity = (value, validation) => {
  let isValid = true;

  if (validation.required) {
    isValid = value.trim() !== "" && isValid;
  }
  if (validation.minLength) {
    isValid = value.length >= validation.minLength && isValid;
  }

  if (validation.maxLength) {
    isValid = value.length <= validation.maxLength && isValid;
  }
 return isValid;

};

1 Ответ

1 голос
/ 24 апреля 2020

Я бы предположил, что поскольку вы изначально установили country в false в state.orderForm.country, оно останется ложным, если не будут внесены изменения. 

country: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "Country"
        },
        value: "England, UK",
        validation: {
          required: true
        },
        valid: false,
        touched: false
      }

Поскольку в стране уже есть заполнитель для "Англия, Великобритания" - и вы считаете, что действительное представление, затем измените действительное на истинное, как показано ниже. Ваша функция checkValidity должна охватывать вас, если пользователь вводит недопустимые данные. 

country: {
            elementType: "input",
            elementConfig: {
              type: "text",
              placeholder: "Country"
            },
            value: "England, UK",
            validation: {
              required: true
            },
            valid: true,
            touched: false
          }

Кроме того, вы, вероятно, можете сократить функцию checkValidity примерно до следующего: 

export const checkValidity = (value, validation) => {
  if (
    value.trim() !== ""
    && value.length >= validation.minLength
    && value.length <= validation.maxLength
  ) {
    return true
  }
  return false
 }
...