showingMessages.md

onChange, onBlur, or onSubmit

You can configure when to show validation messages.

To get a feel for the differences, you can play with the demo.

The underlying stateless input component:

export default ({value, help, onChange, onBlur, type, label}) => {
  return (
    <div>
      <div>{label}</div>
      <input
        type={type || 'text'}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
        />
      <div>{help}</div>
    </div>
  );
};

A configurable react-formstate input component adapter:

export default ({fieldState, handleValueChange, handleBlur, showMessage, ...other}) => {
  return (
    <Input
      value={fieldState.getValue()}
      help={showMessage ? fieldState.getMessage() : null}
      onChange={e => handleValueChange(e.target.value)}
      onBlur={handleBlur}
      {...other}
      />
  );
};

Configuration

Configuring globally:

import { FormState } from 'react-formstate';

// defaults to show on change
FormState.showMessageOn('blur'); // one of: change, blur, submit

// defaults to false
FormState.setEnsureValidationOnBlur(true); // explained below

Overriding locally:

constructor(props) {
  super(props);
  this.formState = FormState.create(this);

  // override global settings
  this.formState.showMessageOn('change');
  this.formState.setEnsureValidationOnBlur(false);

  console.log(this.formState.showingMessageOn()); // 'change'
  console.log(this.formState.ensureValidationOnBlur()); // false;

  // If react-formstate is configured to show messages on change,
  // the message will show on blur and on submit, but react-formstate
  // won't WAIT until blur or submit to show the message:
  console.log(this.formState.showingMessageOnChange()); // true
  console.log(this.formState.showingMessageOnBlur()); // false
  console.log(this.formState.showingMessageOnSubmit()); // false
}

Overriding for a particular input (not sure if this is useful tbh):

<Input formField='special' showMessageOn='submit'/>

Or, do whatever you'd like in your input component:

export default ({formState, fieldState, handleValueChange, handleBlur, ...other}) => {

  // use fieldState.isChanged(), fieldState.isBlurred(), and fieldState.isSubmitted() to define your own logic.

  // here's what react-formstate does:
  const showMessage = fieldState.isMessageVisibleOn(formState.showingMessageOn());
};

ensureValidationOnBlur

The best way to understand what this does is to play with the demo. Blur through some inputs without changing them, then toggle the ensure validation onBlur setting and repeat.

Overriding handleBlur

Like 'handleValueChange', 'handleBlur' is another standard prop generated by react-formstate. You can always override it if necessary:

<Input formField='name' handleBlur={this.customBlurHandler}/>

// this is what the standard blur handler does
customBlurHandler() {
  const context = this.formState.createUnitOfWork();
  const fieldState = context.getFieldState('someField');

  if (this.formState.ensureValidationOnBlur() && !fieldState.isValidated()) {
    fieldState.validate();
  }

  fieldState.setBlurred();
  fieldState.showMessage(); // necessary for backward compatibility only

  context.updateFormState();
}

Input component props

import { FormState } from 'react-formstate';

// optionally suppress deprecated props still passed for backward compatibility.
FormState.rfsProps.updateFormState.suppress = true; // old change handler
FormState.rfsProps.showValidationMessage.suppress = true; // the old name for the blur handler

// other react-formstate props passed to input components:
export default ({formState, fieldState, handleValueChange, handleBlur, showMessage, required, label, ...other}) => {
  // 'required' isn't generated by RFS but unlike other RFS-related props it's not suppressed.
  // react-formstate expects a 'label' prop for the labelPrefix feature and will generate one if not present.
};