redux-form Validate only the fileds on selected tab content - reactjs

Question

Is there a way to pass some initialvalue and update them when the tab is clicked and validate only a particular set of fields
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {Field,reduxForm} from 'redux-form'
import { selectreport, decrementStep } from '../../actions.js'
class Step1 extends Component {
constructor (props) {
super(props)
this.handleChangeTab = this.handleChangeTab.bind(this)
this.stepBack = this.stepBack.bind(this)
}
stepBack (e) {
e.preventDefault()
console.log('reduce step by 1')
this.props.dispatch(decrementStep(this.props.step))
}
handleChangeTab (e) {
const { title: key } = e.target
console.log('click values are ', key)
this.props.dispatch(selectreport(key))
}
renderField(field){
const className = `row form-group ${field.meta.touched && field.meta.error ? 'has-error' : ''}`;
return(
<div className=" col-xs-12 col-md-offset-3 col-md-9">
<div className={className}>
<label className="col-xs-12 col-lg-12">{field.label}</label>
<input
type="text"
placeholder={field.placeholder}
className="form-control"
{...field.input} />
<div className="text-danger">
{field.meta.touched ? field.meta.error : ''}
</div>
</div>
</div>
);
}
onSubmit(values){
const { step, report } = this.props
}
render () {
const { step, report, parsedAddress,handleSubmit } = this.props
const { Line1, Line2} = parsedAddress
let st = JSON.stringify(step)
return (
<form className="" onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<div className="">
<div className="row">
<div className="col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3">Enter details.</div>
</div>
<div className="row">
<div className="nav nav-pills col-xs-10 col-md-6 col-xs-offset-1 col-md-offset-3 PADD0">
<div className={report == 'address' ? ('col-xs-6 active') : 'col-xs-6'}>
<a data-toggle="tab" href="#address" title="address" onClick={this.handleChangeTab}>Address</a></div>
<div className={report == 'phone' ? 'col-xs-6 active' : 'col-xs-6'}>
<a data-toggle="tab" href="#phone" title="phone" onClick={this.handleChangeTab}>Phone</a></div>
</div>
</div>
<div className="row">
<div className="tab-content PADD20PX text-centered col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-6 ">
<div id="address" className={report == 'address' ? 'tab-pane fade in PADD20PX active' : 'tab-pane fade in PADD20PX'}>
<Field
label="Address"
name="Line1"
placeholder="123 Sample Street"
component={this.renderField}
/>
<Field
label="address2"
name="Line2"
placeholder="APT"
component={this.renderField}
/>
</div>
<div id="phone" className={report == 'phone' ? 'tab-pane fade in PADD20PX active' : 'tab-pane fade in PADD20PX'}>
<Field
label="PhoneNumber"
name="phone"
placeholder="123.456.7890"
component={this.renderField}
/>
</div>
</div>
</div>
</div>
<div className="row PADDBOX">
<div className="col-xs-12">
<div className="pull-left">
<div className="pull-left">
<button type="button btn-rounded" onClick={this.stepBack} className="btn btn-default">Back</button>
</div>
</div>
<div className="pull-right"><button type="submit">Search</button></div>
</div>
</div>
</form>
</div>
)
}
}
function validate(values,props){
console.log("inside validate",props);
const errors = {};
if(!values.Line1){
errors.Line1 = "Enter address";
}
if(!values.Line2){
errors.Line2 = "Enter address";
}
if(!values.phone){
errors.phone = "Enter phone number";
}
return errors;
}
function mapStateToProps (state) {
return {
step: state.step,
parsedAddress: state.parsedAddress,
report: state.report
}
}
export default reduxForm({destroyOnUnmount: false,validate,form:'PostsnewForm'})(
connect(mapStateToProps)(Step1)
);
Have two tabs one for address and phone.
Trying to submit the form while on address tab, cant submit even if I pass all the validations since the validation on phone tab fails
Is there a way to pass a global state to the validate function and validate particular fields based on an attribute in global state.

Answer 1

Try this:
function validate(values) {
// console.log(values) -> {title: 'asdf', categories: 'asdf', content: 'asdf'}
const errors = {};
// validate the inputs from 'values'
if (!values.title || values.title.length < 3) {
errors.title = "Enter a title that is at least 3 characters!";;
}
// if errors is empty, the form is fine to submit
// If errors have any properties, redux form assumes form is invalid
return errors;
}
if (!values.categories) {
errors.categories = 'Enter some categories';
}
if (!values.content) {
errors.content = 'Enter some content, please';
}
export default reduxForm({
validate,
form: 'PostsNewForm'
})(PostsNew);
an if statement for the fields you do want to validate.