redux 表单的验证功能未触发

问题描述

这是我的代码，我正在尝试触发验证功能，但由于我无法验证表单而未触发它

import React from 'react';
import { Grid,Row,Col } from '@vds/grids';
import ReqInput from './../../common/ReqInput';
import {Body,Micro} from './../../common/Typography/index';
import styled from 'styled-components';
import { Field,reduxForm } from 'redux-form/immutable';
import * as validation from './../../common/validation.js';


class PaymentForm extends React.PureComponent {
    constructor() {
        super();
    }

    onChangeTextBox = (name,e) => { 
        
     }

    render() {
        const { firstNameLabel,lastNameLabel,cardLabel,cvvLabel,expirationLabel,zipCodeLabel,disclaimerText,cvvTooltipInfo} = this.props;
        const images = [ MasterpassSC,VisaVerified,nortonSeal ];
        // const cvv = cvv;
        // const tooltipContent = cvvTooltipInfo + 
        return (
            <React.Fragment>
                <headingContainer>
                    <Col>
                        <BoldDiv>{this.props.cardInfoLabel}</BoldDiv>
                        <span>{this.props.enterCardInfoLabel}</span>
                    </Col>
                </headingContainer>
                <form>
                <FormDiv>
                    <InputRow>                    
                        <Col className="namesInput">
                            <ReqInput
                            // defaultValue={contactEditProps.contactInfovalues ? contactEditProps.contactInfovalues.firstName : ""}
                            id="firstName"
                            name="firstName"
                            type="text"
                            placeholder=""
                            required
                            label={<Micro primitive="span">{firstNameLabel}</Micro>}
                            onChange={(e) => this.onChangeTextBox('fName',e)}
                        />
                        </Col>
                        <Col className="namesInput">
                            <ReqInput
                            // defaultValue={contactEditProps.contactInfovalues ? contactEditProps.contactInfovalues.lastName : ""}
                            id="lastName"
                            name="lastName"
                            type="text"
                            placeholder=""
                            required
                                error
                            label={<Micro primitive="span">{lastNameLabel}</Micro>}
                            onChange={(e) => this.onChangeTextBox('lName',e)}
                        />
                        </Col>
                    </InputRow>
                </FormDiv>
                
                            </form>
            </React.Fragment>
        )
    }
};

const validate = (values,props) => {
    const errors = {};
    console.log('vzlues',values);
  const firstName = values.get('firstName');
  const lastName = values.get('lastName');
  console.log('in validate',firstName);
  if (!firstName) {
    errors.firstName = props.requiredText;
  } else if (!validation.isValidName(firstName)) {
    errors.firstName = props.firstNameErrorText;
  }
  if (!lastName) {
    errors.lastName = props.requiredText;
  } else if (!validation.isValidNameWithHyphen(lastName)) {
    errors.lastName = props.lastNameErrorText;
  }
 }
  return errors;
 }

export default reduxForm({
    form: 'PaymentFormDetails',validate,})(PaymentForm);

我无法理解我在这里遗漏了什么，我该怎么做，调用验证函数广告让我的表单在给出无效输入时显示所有错误。

reqInput 是带有输入字段的用户定义组件

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）