FaridSafi / react-native-gifted-form

📝 « One React-Native form component to rule them all »
MIT License
1.44k stars 214 forks source link

Empty form onSubmit throws error #72

Closed sudugo closed 8 years ago

sudugo commented 8 years ago

my code is same as the example with some fields removed and renamed. on submit empty form with default value works fine. if it does not have default value it throws the following error:

screenshot_20160820-203715

My Code:

<View style = {styles.container}><GiftedForm
        formName='signupForm' // GiftedForm instances that use the same name will also share the same states
        openModal={(route) => {
          Actions.SignUpModalScene({ ...route, title: route.getTitle()});
        }}

        clearOnClose={true} // delete the values of the form when unmounted

        defaults={{
          /*firstName: 'fff',
          lastName: 'fff',
          userName:'fff',
          password:'fff',
          emailAddress:'fff',
          zipCode:'fff',*/
        }}

        validators={{
          firstName: {
            title: 'First Name',
            validate: [{
              validator: 'isLength',
              arguments: [3, 75],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            }]
          },
          lastName: {
            title: 'Last Name',
            validate: [{
              validator: 'isLength',
              arguments: [3, 75],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            }]
          },
          userName: {
            title: 'Username',
            validate: [{
              validator: 'isLength',
              arguments: [3, 16],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            },{
              validator: 'matches',
              arguments: /^[a-zA-Z0-9]*$/,
              message: '{TITLE} can contains only alphanumeric characters'
            }]
          },
          password: {
            title: 'Password',
            validate: [{
              validator: 'isLength',
              arguments: [6, 16],
              message: '{TITLE} must be between {ARGS[0]} and {ARGS[1]} characters'
            }]
          },
          emailAddress: {
            title: 'Email address',
            validate: [{
              validator: 'isLength',
              arguments: [6, 255],
            },{
              validator: 'isEmail',
            }]
          },
          zipCode: {
            title: 'Zipcode',
            validate: [{
              validator: 'isLength',
              arguments: [2],
              message: '{TITLE} is required'
            }]
          },
        }}
      >

        <GiftedForm.SeparatorWidget />
        <GiftedForm.TextInputWidget
          name='firstName' // mandatory
          title='First name'
          image={require('../../res/icons/color/user.png')}
          placeholder='Marco'
          clearButtonMode='while-editing'
        />

        <GiftedForm.TextInputWidget
          name='lastName' // mandatory
          title='Last name'

          image={require('../../res/icons/color/user.png')}

          placeholder='Polo'
          clearButtonMode='while-editing'
        />

        <GiftedForm.TextInputWidget
          name='userName'
          title='Username'
          image={require('../../res/icons/color/contact_card.png')}

          placeholder='MarcoPolo'
          clearButtonMode='while-editing'

          onTextInputFocus={(currentText = '') => {
            if (!currentText) {
              let userName = GiftedFormManager.getValue('signupForm', 'userName');
              if (userName) {
                return fullName.replace(/[^a-zA-Z0-9-_]/g, '');
              }
            }
            return currentText;
          }}
        />

        <GiftedForm.TextInputWidget
          name='password' // mandatory
          title='Password'

          placeholder='******'

          clearButtonMode='while-editing'
          secureTextEntry={true}
          image={require('../../res/icons/color/lock.png')}
        />

        <GiftedForm.TextInputWidget
          name='emailAddress' // mandatory
          title='Email address'
          placeholder='example@gmail.com'

          keyboardType='email-address'

          clearButtonMode='while-editing'

          image={require('../../res/icons/color/email.png')}
        />
        <GiftedForm.TextInputWidget
          name='zipCode'
          title='Zipcode'
          image={require('../../res/icons/color/contact_card.png')}

          placeholder='02201'
          clearButtonMode='while-editing'

          onTextInputFocus={(currentText = '') => {
            if (!currentText) {
              let zipCode = GiftedFormManager.getValue('signupForm', 'zipCode');
              if (zipCode) {
                return fullName.replace(/[^a-zA-Z0-9-_]/g, '');
              }
            }
            return currentText;
          }}
        />
          <GiftedForm.SeparatorWidget />

        <GiftedForm.SubmitWidget
          title='Sign up'
          widgetStyles={{
            submitButton: {
              backgroundColor: theme.signUpBtnColor,
            }
          }}
          onSubmit={
                      (isValid,
                       values,
                       validationResults,
                       postSubmit = null,
                       modalNavigator = null) =>
                       {
                          if (isValid === true) {
                            // prepare object
                            //values.gender = values.gender[0];
                            //values.birthday = moment(values.birthday).format('YYYY-MM-DD');

                            /* Implement the request to your server using values variable
                            ** then you can do:
                            ** postSubmit(); // disable the loader
                            ** postSubmit(['An error occurred, please try again']); // disable the loader and display an error message
                            ** postSubmit(['Username already taken', 'Email already taken']); // disable the loader and display an error message
                            ** GiftedFormManager.reset('signupForm'); // clear the states of the form manually. 'signupForm' is the formName used
                            */
                          }
                          else {
                            postSubmit(['No Values Entered']);
                          }
                        }
                    }

        />

        <GiftedForm.NoticeWidget
          title='By signing up, you agree to the Terms of Service and Privacy Policity.'
        />

        <GiftedForm.HiddenWidget name='tos' value={true} />

      </GiftedForm>
    </View>);

Is anyone else experiencing the same issue?

ramneekhanda commented 8 years ago

I am facing this! Let me know if you find any solution.

sudugo commented 8 years ago

Maybe the validator needs to know what type(string) value is. I don't know. i solved it by using empty default strings as follows.

  defaults={{
          firstName: '',
          lastName: '',
          userName:'',
          password:'',
          emailAddress:'',
          zipCode:'',
        }}