Input Validation and spaces

Question

I have the Input below using React Native.

<View style={ styles.container }>
        <Input 
        placeholder="Add new chat"
        value={input}
        onChangeText={(text) => setInput(text)}
        leftIcon={
            <Icon name="wechat" type="antdesign" size={24} color="black" />
        }
        />

        <Pressable style={styles.buttonAdd} onPress={createChat}>
            <Text style={styles.text}>Create</Text>
        </Pressable>

    </View>

If i type nothing then i get my alert which is fine however if i put 1 or + spaces the data gets submited. How can i disallow the submit and so set the alert when there is only spaces?

    const [input, setInput] = useState("");

const createChat = async () => {
    if(!input) {
        alert("The chat name cannot be blank");
        return;
    }
    await db
    .collection("chats")
    .add({
        chatName: input
    })
    .then(() => {
        navigation.goBack();
    })
    .catch(() => {
        alert(error);
    })
};

PRSHL · Accepted Answer · 2021-09-16 11:39:38Z

1

You could just remove all spaces and check if the string is still longer than zero characters.

e.g.:

const submit = () => {
    if (input.replaceAll(' ', '').length > 0){
        // your submit logic here
    }
}

otherwise you could also test for regex, but this might be overkill for your needs.

answered Sep 16, 2021 at 11:39

PRSHL

1,4531 gold badge14 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Håken Lid Over a year ago

You can also use input.trim() to remove trailing and leading whitespace from a string.

nithinpp · Accepted Answer · 2021-09-16 11:42:33Z

1

As input is a string, you can trim your string to remove any whitespaces from either end of the string.

Notice trim() will remove whitespaces from either end of the string, not the spaces in between words.

const string = "   A string with spaces at end  ";
console.log(string.trim());

const string_with_only_space = "      ";
console.log(string_with_only_space.trim());

if(!string_with_only_space.trim()) {
  console.log("STRING IS EMPTY");
} else {
  console.log("STRING IS NOT EMPTY");
}

You can change your if condition to

if(!input.trim()) {
  alert("The chat name cannot be blank");
  return;
}

answered Sep 16, 2021 at 11:42

nithinpp

2,0351 gold badge16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Input Validation and spaces

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related