0

Okay so I have Login.js & Signup.js components on the Login component, the onFinish event works perfectly where as on Signup the onFinish doesn't work at at all -- even not a console.log()

Login.js (username, password):

import React from 'react';
import { LockTwoTone,UserOutlined,LoadingOutlined } from '@ant-design/icons';
import { Form, Input, Button, Spin } from 'antd';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import * as actions from '../store/actions/auth';

const FormItem = Form.Item;
const antIcon = <LoadingOutlined type="loading" style={{ fontSize: 24 }} spin />;


class NormalLoginForm extends React.Component {
handleSubmit = (e) => {
console.log("i am getting printed");    
}
render() {
let errorMessage = null;
if (this.props.error) {
    errorMessage = (
        <p>{this.props.error.message}</p>
    );
}
return (
    <div>
        {errorMessage}
        {
            this.props.loading ?

            <Spin indicator={antIcon} />

            :

            <Form onFinish={this.handleSubmit} className="login-form col-xs-8">
                <FormItem name="username" rules={[{ required: true, message: 'Please input your Username!' }]}>
                <Input prefix={<UserOutlined type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                </FormItem>
                <FormItem name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
                <Input prefix={<LockTwoTone  type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                </FormItem>
                <FormItem>
                  <Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
                      Login
                  </Button>
                </FormItem>
            </Form>
        }
  </div>
  );
 }
} 
const mapStateToProps = (state) => {
return {
    loading: state.loading,
    error: state.error
}
}
 const mapDispatchToProps = dispatch => {
return {
    onAuth: (username, password) => 
 dispatch(actions.authLogin(username, password)) 
    }
}
  export default connect(mapStateToProps, mapDispatchToProps)(NormalLoginForm);

SignUp.js (username, email, password, confirm-password):

import React from 'react';
import { MailTwoTone,LockTwoTone,UserOutlined,LoadingOutlined } from 
'@ant-design/icons';
import { Form, Input, Button } from 'antd';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import * as actions from '../store/actions/auth';

const FormItem = Form.Item;
class RegistrationForm extends React.Component {
  state = {
    confirmDirty: false,
    };
  handleSubmit = (values) => {
    console.log("doesnt print me");
 }
  handleConfirmBlur = (e) => {
     const value = e.target.value;
     this.setState({ confirmDirty: this.state.confirmDirty || 
 !!value });
  }
  validateToNextPassword = (values, pass,item3) => {
     return true; // for simplicity
  }
  render() {    
   return (
<div>

  <Form onFinish={this.handleSubmit} className="sign-up-form">
    
    <FormItem name="username" rules={[{ required: true, message: 'Please input your Username!' }]}>            
            <Input prefix={<UserOutlined type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />            
    </FormItem>
    
    <FormItem name="email" rules={[{
      type: 'email', message: 'The input is not valid E-mail!',
     }, {
      required: true, message: 'Please input your E-mail!',
     }]}>          
        <Input prefix={<MailTwoTone type="mail" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Email" />          
    </FormItem>

    <FormItem name="password" rules={[{
      required: true, message: 'Please input your Password!',
    },{
      validator: this.validateToNextPassword,
    }]}>          
        <Input prefix={<LockTwoTone type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />          
    </FormItem>

    <FormItem name="confirm" rules={[ {
      required: true, message: 'Please confirm your password!',
    },({ getFieldValue }) => ({
      validator(rule, value) {
        if (!value || getFieldValue('password') === value) {
          return Promise.resolve();
        }
        return Promise.reject('password does not match!');
      },
    }),
  ]}>          
        <Input prefix={<LockTwoTone type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Confirm Password" onBlur={this.handleConfirmBlur} />        
    </FormItem>

    <FormItem>
      <Button  type="primary" htmlType="submit" style={{marginRight: '10px'}}>
          Sign Up
      </Button>
    </FormItem>

  </Form>
</div>
);
}
}

const mapStateToProps = (state) => {
    return {
        loading: state.loading,
        error: state.error
    }
}
const mapDispatchToProps = dispatch => {
return {
    onAuth: (username, email, password1, password2) => 
dispatch(actions.authSignup(username, email, password1, password2)) 
}
}
export default connect(mapStateToProps, mapDispatchToProps) 
(RegistrationForm);

It is pretty much the same form that triggers the same function but it doesn't work on Signup.js I checked everything possible... what could be the reason?

2
  • It would be nice if you post the whole code of both components Aug 18, 2020 at 18:33
  • hope it is more clear now Aug 18, 2020 at 18:54

1 Answer 1

4

The problem is that the validator you are setting in the rules for the 'password' field is expecting to receive a function that returns a Promise but you are returning a boolean true. Your function validateToNextPassword should return a Promise.resolve() as a boolean function would return true or Promise.reject() as a false. Something like this:

    validateToNextPassword = (values, pass,item3) => {
         if (passesCondition)
           return Promise.resolve();
         else
           return Promise.reject('Error message');
    }

For a full example: https://ant.design/components/form/#components-form-demo-register

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.