Home / Questions / 559688
Accepted
Giovanny
Asked: 2022-09-30 13:36:28 +0800 CST 2022-09-30 13:36:28 +0800 CST

validate select when they have not selected any option in react native

  • 772

good day, I have a select in react native but I need to validate in my form that when there is no selected option an event is fired when clicking on a button, I have an algorithm that validates any input field but I have not been able to with the select, I thank you if you can help me.

if it were with a textinput field to evaluate it would work without problems and it would show me an alert if the field is empty but I couldn't with the select "I couldn't capture the event"

import RNPickerSelect, { defaultStyles }  from 'react-native-picker-select';
    export const Pagina6Screen = ({navigation}) => {
    const [errorEmail,setErrorEmail ] = useState("")
    const [errorConfirm,setErrorConfirm ] = useState("")
    const registerUser =()=>{
      if(!validateData()){
        return;
      }
      //evento si ha seleccionado algo en el select
      navigation.replace('Pagina7Screen')
    }
    const validateData = () =>{
       setErrorConfirm("")
       setErrorEmail("")
       let isvalid = true
       if(!miselect){
        Alert.alert(
          "CAMPO OBLIGATORIO",
          "NO SELECCIONO NADA EN EL SELECT",
          [
            {
              text: "Aceptar",
              style: "cancel",
              
            },
          ],
          {
            cancelable: true,      
          }
        );
        isvalid = false
       }
       setErrorEmail("*")
       return isvalid
    }
    //select
    const miselect = {
      label: 'T.Doc',
      value: null,
      color: '#9EA0A4'
      
    };
    <RNPickerSelect 
    onValueChange={(value) => console.log(value)}
    placeholder={miselect}
    items={[
    { label: 'Cedula', value: 'Cedula' },
    { label: 'Pasaporte', value: 'Pasaporte' }
    ]}
    style={{
    inputAndroid: {
    borderColor:"black",
    }
    }}
<TouchableOpacity
           onPress={() => registerUser()}        
          >
              <Image source={require('../assets/guardar.png')} />
          </TouchableOpacity>
    />

react-native

1 Answers

  1. Best Answer

    From what you mention, you need to rely on the onValueChange method of the RNPickerSelect component .

    Using that method you can save the value of the selected option in your state and then do the validation you need.

    Something like that:

    const Pagina6Screen = () => {
  const [otionsSelected, setOptionsSelected] = useState<string | undefined>();

const validateData = () => {
    if (otionsSelected) {
      // Una opción ya fue seleccionada
    } else {
      // No se ha seleccionado ninguna opción
    }
  };
  return (
    <View style={styles.container}>
      <RNPickerSelect
        onValueChange={value => {
          setOptionsSelected(value);
        }}
        items={[
          {label: 'Cedula', value: 'Cedula'},
          {label: 'Pasaporte', value: 'Pasaporte'},
        ]}
      />
      <TouchableOpacity onPress={validateData}>
        <Image source={require('../assets/guardar.png')} />
      </TouchableOpacity>
    </View>
  );
};

    I hope my example will help you

    • 1