Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

316
Visualizações
React JS Autocomplete: validate control based on option selected

I'm working on the validation of an AutoComplete control using React JS and MaterialUI, by default the option "please select.." is loaded like in this image:

autocomplete default value

If the user press Send Order and the selected value is the first one an error message is sent to the user; but If the user chose a different option, the state of the Autocomplete is still in error, please take a look at this picture:

enter image description here

The below code shows you how I'm manage the AutoComplete code:

  <div className={clientMethodPaymentControlClasses}>
    <label htmlFor="clientMethodPayment">Method of Payment *</label>
    <Autocomplete
      id="clientMethodPayment"
      options={paymentMethods}
      defaultValue={paymentMethods[0]}
      getOptionLabel={(option) => option.title}
      ref={clientMethodPaymentRef}
      onChange={(e,v) => setPaymentMethodValue(v)}
      style={{ width: 300 }}
      autoHighlight
      renderInput={(params) => (
        <TextField {...params} onChange={({ target }) => setPaymentMethodValue(target.value)}  variant="outlined" fullWidth autoComplete="off" />
      )}
    />
    {!formInputsValidity.clientMethodPayment && (
      <p>Please choose a method of payment</p>
    )}
  </div>

I use the bellow code for list of values and how I manage the control's state:

const paymentDefaultValue = (value) => value !== "Please choose an option";

const paymentMethods = [
  { title: "Please choose an option", id: 0 },
  { title: "Cash", id: 1 },
  { title: "Credit Card", id: 2 },
  { title: "Crypto Currency", id: 3 },
];

const OrderDetails = (props) => {
  const [paymentMethodValue, setPaymentMethodValue] = useState(paymentMethods[0]);

Moreover, the next code is the key to classify if a control has input errors:

const enteredClientMethodPaymentIsValid = !paymentDefaultValue(
  enteredClientMethodPayment
); 

The fact is that I can't catch if the user chose a different option rather than the default one and for that reason the control is always marked as error, so my question is: what am I missing to validate my AutoComplete control? In case it might be useful this is the full code: https://github.com/hftamayo/reactletsorder/blob/unstable/src/components/FoodOrder/Cart/OrderDetails.js

Thanks a lot

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda