adding form validation in react-native, removing extra spaces

Question

I have a login form that looks like this (1):

when I add form validation it looks like this (2):

the spcaes between the textInputs are because I have something like this:

    <View style={styles.SectionStyle}>
      <TextInput
        style={styles.inputStyle}
        .
        .
        .
        onBlur={() => checkEmailRGX()}
      />
    </View>
    <View style={styles.ErrorStyle}><Text style={{color: 'red', fontWeight: 'bold'}}>{emailError}</Text></View>

when the inputs are incorrect (3):

I want to keep the form the same as (1), when fields are not correctly filled in then it goes to (3), and when any of the fields are filled in correctly, the error text should be gone, plus the area the stay at and when you start the form there is a gap between the elements of the form and it looks like (2),

this is my error text field:

  var emailErrorField = '';

and this is the validation:

const checkEmailRGX = () => {
    let rjx=/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    let isValid = rjx.test(email);
    if(email == ''){
      emailErrorField = t('eptyfield');
      setEmailErro(emailErrorField);
    }
    else if(!isValid){
      emailErrorField = t('emailfield');
      setEmailErro(emailErrorField);
    }
    else{
      emailErrorField = "";
      setEmailErro(emailErrorField);
    }
  }

How can I remove the white spaces but keep the error message?

Guruparan Giritharan · Accepted Answer · 2020-10-12 10:58:10Z

2

Conditionally render the error like below

{
emailErrorField && <View style={styles.ErrorStyle}><Text style={{color: 'red', fontWeight: 'bold'}}>{emailError}</Text></View>
}

Then it would be shown only if emailError has value

edited Oct 12, 2020 at 10:58

answered Oct 12, 2020 at 9:41

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

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

6 Comments

S. N Over a year ago

I tried this, but sicne I have to put this ina <Text> , it will create an empty place for it, like in the photo (2), and then it just adds the error there, is there anything special I have to do for this?

Guruparan Giritharan Over a year ago

is your emailText empty '' or a space ' ' if its empty it should be hidden

Guruparan Giritharan Over a year ago

This wont render the whole View and the content if the emailText is empty

Guruparan Giritharan Over a year ago

yes you should compare the emailErrorField updated my answer please try it

S. N Over a year ago

doesnt work, tells me its string should be wrapped inside a Text element!

|

AntonioSk · Accepted Answer · 2020-10-12 09:40:27Z

0

trim the input with: string.trim()

In JavaScript, trim() is a string method that is used to remove whitespace characters from the start and end of a string. Whitespace characters include spaces, tabs, etc. Because the trim() method is a method of the String object, it must be invoked through a particular instance of the String class

Then check if string is null or ""

answered Oct 12, 2020 at 9:40

AntonioSk

5361 gold badge3 silver badges21 bronze badges

Collectives™ on Stack Overflow

adding form validation in react-native, removing extra spaces

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related