0

这是我的代码，我正在尝试触发验证功能，但它没有被触发，因此我无法验证我的表单

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 是带有输入字段的用户定义组件

4

0 回答 0