'required' is needed to handle separately

[CrisLi]

I have a very simple input component.

    <MyInput
          required
          name="phone"
          validations="minLength:2"
          validationError="Phone is required and must have more than 2 characters." />

The issue is when user doesn't input any thing and submits the form, the isValid() method will return false since the required is not met. But getErrorMessage() method is returning null. I have to add some additional code to handle required validation.

If I remove the required the props, then if user submits the form without any inputs, the minLength:2 validation will be passed.

I think in the most of cases, developers will like to let null, '' and undefined not meet validation of minLength:2, then we don't have to handle 'required' separately. We can change our code like

    <MyInput
          name="phone"
          validations="minLength:2"
          validationError="Phone is required and must have more than 2 characters." />

and the error message will display when user input nothing in the form.

Or is there any possible to let getErrorMessage() method return a message when required is not met.

The comments on the #216 is very clear but the api is convenience enough.
validations prop => showError() / getErrorMessages()
required prop => showRequired()

[dayAlone]

+1

It will be great if minLength:1 checked that field value is not null, '' or undefined

[ctumolosus]

So, I did some digging in the implementation and it looks like when you use the required attribute and the field has no value the validation error messages are skipped even though they are computed. It was not clearly documented, but adding { isDefaultRequiredValue: "Your error message when field is required" } to validationErrors will actually output that error message.

[eriknyk]

+1

[dsteinbach]

+1
minLength:1 should give the error message when the input is not pristine and it's length is less than 1.

[dsteinbach]

I came up with a workaround that goes agaisnt recommended usage but it works:

  render() {
    const { showRequired, showError, getValue, name, title, className, isPristine, type, hasValue, getErrorMessage, validationError } = this.props;
    const hasError = (!isPristine() && (showError() || !hasValue()));
    const errorMessage = hasError ? validationError : null;
    return (
      <div className={cx('form-group', className, {'required': showRequired(), 'has-error': hasError})}>
        <label htmlFor={name}>{title}</label>
        <input
          className="form-control"
          type={type || 'text'}
          name={name}
          id={name}
          onChange={this.changeValue}
          value={getValue()}
          checked={type === 'checkbox' && this.getValue() ? 'checked' : null}
        />
        <span className='validation-error'>{errorMessage}</span>
      </div>
    );
  }

[Semigradsky]

minLength:1 should give the error message when the input is not pristine and it's length is less than 1.

@dsteinbach , @eriknyk , @CrisLi , @dayAlone why? What should I do if I want to validate minLength only when field not empty?
Now you have more flexibility in adding or removing required attribute.

[Semigradsky]

See #135