mengapa validasi bidang yang diperlukan tidak berfungsi dalam formulir menggunakan reaksi?

hai saya melakukan validasi formulir menggunakan react-final-form. Saya juga mengambil bantuan dari contoh ini https://codesandbox.io/s/github/final-form/react-final-form/tree/master/examples/field-validasitingkat?dari-embed Saya mencoba melakukan hal yang sama ketika saya mengklik tombol submit maka akan muncul kesalahan Required jika bidang tersebut wajib diisi.

saat ini, di demo saya, ini tidak ditampilkan

ini kode saya https://codesandbox.io/s/quizzical-hellman-65dy3

<RFField
    component={SForm.Input}
    label="Name"
    name="name"
    placeholder="Please Enter full Name"
    required={true}
    validate={required}
/>

apakah ada cara untuk menampilkan pesan yang diperlukan?


reactjs react-final-form semantic-ui final-form
person user944513    schedule 12.08.2019    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Pesan kesalahan tersedia sebagai pendukung, tetapi Anda sebenarnya perlu menyiapkan mark-up untuk menampilkan pesan required.

Anda dapat menyusun ulang SForm Anda seperti ini agar berfungsi dengan semantic-ui dan react-final-form.

  <SForm.Group widths="equal">
    <RFField
      label="Name"
      name="name"
      validate={required}
    >
      {({ input, meta }) => (
        <div>
          <label>First Name</label>
          <SForm.Input {...input} type="text" placeholder="First Name"/>
          {meta.error && meta.touched && <span>{meta.error}</span>}
        </div>
      )}
    </RFField>
    <RFField
      label="last Name"
      name="lastName"
      validate={required}
    >
      {({ input, meta }) => (
        <div>
          <label>Last Name</label>
          <SForm.Input {...input} type="text" placeholder="Last Name"/>
          {meta.error && meta.touched && <span>{meta.error}</span>}
        </div>
      )}
    </RFField>
  </SForm.Group>

Lihat kode yang berfungsi: https://codesandbox.io/s/flamboyant-shtern-s1pgj

person Cool Guy    schedule 12.08.2019
comment
di kodedankotak Anda menggunakan bidang input bukan SForm.Input - person user944513; 12.08.2019
comment
Oh mungkin hanya perlu diperbarui. Seperti yang saya lihat sekarang, ia menggunakan SForm.Input - person Cool Guy; 12.08.2019
comment
@ user944513 Saya memberikan beberapa gaya ekstra di sana karena sepertinya aslinya hilang ketika kita menggunakan format ini. Beri tahu saya jika itu membantu. - person Cool Guy; 12.08.2019