Form Helper React Native dengan Validate js

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

Secara 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.