FormValidation.js

PHOTO EMBED

Tue May 04 2021 11:48:39 GMT+0000 (UTC)

Saved by @arsal

import React from 'react'
import { useState } from 'react'
import { TextInput, View, StyleSheet, TouchableOpacity,Text, Alert } from 'react-native'

const FormValidation = () =>
{   
    const [Empty, uptEmpty] = useState({chk:""})
    const [valid, uptValid] = useState("")
    let rjx = /^[A-za-z]+$/
    function check(e)
    {
       if(!rjx.test(e))
       {
           uptValid("Enter Only Text")
       }else{
           uptValid("")
       }
    }

    function EmptyCheck(e)
    {   uptEmpty({chk:e})
        if(Empty.chk.length<1)
        {
            alert("Please Fill Field")
        } 
    }
   return(
       <View>
           <TextInput placeholder="Max Lenght" maxLength={7} style={styles.TextInp}/>
           <TextInput secureTextEntry={true} placeholder="Numeric Keyb.." keyboardType='numeric' style={styles.TextInp}/>
           <TextInput placeholder="Numeric Valid Error" style={styles.TextInp} 
           onChangeText={(e) => check(e)}
           />
           <TextInput placeholder="Empty Value Validation" style={styles.TextInp} 
           onChangeText={(e) => EmptyCheck(e)}
           />
           <Text style={{fontSize:15, marginTop:10, marginLeft:20}}>{valid}</Text>
           <TouchableOpacity onPress={()=>EmptyCheck()} activeOpacity={0.8} style={styles.container}>
               <Text style={styles.btn}>
                   Check
               </Text>
           </TouchableOpacity>
           
       </View>
   )
}
const styles = StyleSheet.create
({
  container:
  {
      marginTop:20,
    backgroundColor: 'red',
    height:50,
    width:70,
    borderWidth:1,
    justifyContent:'center',
    alignSelf:'center',
    alignItems:'center',
    
  },
  btn:
  {
     color:'white',
     fontSize:15,

  },
  TextInp:
  {
      borderWidth:1,
      borderColor:'black',
      marginLeft:20,
      marginTop:20,
      marginRight:20
  }
})
export default FormValidation
content_copyCOPY