Bagaimana cara membuat Form Helper React Native dengan validatejs ?
Di Tips kali ini saya akan membuat validasi form input di react native. Sebelum memulai, library yang di gunakan untuk membuat validasi form ini yaitu Validate JS.
- Tahap pertama anda harus menginstall library validatejs bisa di download langsung atau menggunakan npm
npm install --save validate.js
TLDR;
Terlalu panjang baca penjelasannya, langsung tengok source codenya
Download di GithubSecara teori, form helper ini akan mengecek inputan user sesuai dengan rule-rule yang diberikan.
Tampilan Form Komponen
File Helper
Struktur file helper yang dibuat terdiri dari dua file :
- /validation --- rules.js --- validationHelper.js
Penjelasan :
rules.js : Objek variabel
email: { presence: { allowEmpty: false, message: '^Email tidak boleh kosong' }, email: { message: '^Email tidak valid' } }, general: { presence: { allowEmpty: false, message: '^Tidak Boleh Kosong' } }, phoneNumber: { presence: { allowEmpty: false, message: '^Tidak Boleh Kosong' }, format: { pattern: /^[\s\./0-9]*$/ } }, password: { presence: { allowEmpty: false, message: "^Tidak Boleh Kosong" }, format:{ pattern: /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/, message: "^Password harus memiliki satu huruf besar, angka, dan karakter spesial" }, length: { minimum: 8, message: "^Password harus memiliki satu huruf besar, angka, dan karakter spesial" } },
validationHelper.js : Fungsi-fungsi untuk validasi
// Mengambil Value Inputan onInputChange({ id, value }) // Mengembalikan state terbaru yang sudah di validasi getValidationState({ input, value }) // Cek validasi inputan validate({ type, value }) // Cek seluruh inputan yang dites isValidate()
Cara penggunaan helper di component <TextInput />
<View style={styles.inputGroup}> <Text>Nama Depan</Text> <TextInput style={styles.input} onChangeText={value => this.onInputChange({id: 'firstName', value})} /> {this.onError('firstName')} </View>
Method onError, akan mengembalikan error message bila terdapat kesalahan.
Hasilnya akan seperti dibawah ini:
Semoga bermanfaat, silahkan gunakan source ini sesuai dengan kebutuhan.
Comments