Validation doesn't seem to be running

[mustafashabib]

Hey all

I'm trying to make a simple "TimeInput" component which needs to validate that the input looks like a valid time.

For some reason, my validation doesn't seem to be running. When I enter an invalid value, it doesn't show any error messages and will let me submit. If I pass a required property when I render a Formsy.Form with this components in them, the Required message shows up when I don't provide it, though.

I'm using material-ui for the TextField component.

Here's my component:

import TextField from '../material-ui/components/text-field';
import React from 'react';
import Formsy from 'formsy-react'

var FormsyTimeTextField = React.createClass({
  mixins: [Formsy.Mixin],
  propTypes: {
    onTimeChange: React.PropTypes.func
  },

  getDefaultProps: function() {
    return { placeholderText: '12:00' };
  },

  getInitialState: function() {
    return { placeholder: '' }
  },

  _onBlur: function(ev) {
    //if there's something in the textbox, show it instead of the placeholder
    if (this.getValue()) {
      this.setState({placeholder: this.props.placeholderText});
    } else {
      this.setState({placeholder: ''})
    }
  },
  _onChange: function(ev) {
    this.setValue(ev.target.value);
    if(ev.target.value == '') {
      this.setState({ placeholder: this.props.placeholderText});
    } else {
      this.setState({ placeholder: ''});
    }
  },
  _onFocus: function(ev) {
    //if this is being focused for the first time or the value is empty
    //when being focused, show the placeholder text
    if (this.isPristine() || !this.getValue() ) {
      this.setState({ placeholder: this.props.placeholderText})
    } else this.setState({placeholder: ''});
  },

  getCustomErrorMessage: function() {
    if(!this.isValid() || this.showError()) {
      if (this.props.validationError) {
        return this.props.validationError;
      }
    }

    if(!this.isPristine() && this.showRequired()) {
      return 'Required';
    } else return '';
  },

  render: function() {
    var errorMsg = this.getCustomErrorMessage();
    var {label, pattern, formatCharacters, size, placeholder, ...props} = this.props;

    return <TextField {...props}
      type="time"
      placeholderText='12:00'
      placeholder={this.state.placeholder}
      size="10"
      floatingLabelText={label}
      validations={{
        matchRegexp: /^(0[1-9]|1[012]):(0[1-9]|[12345][0-9]) (AM|PM|am|pm)$/
      }}
      validationError="Please enter a valid time"
      onChange={this._onChange}
      onBlur={this._onBlur}
      onFocus={this._onFocus}
      errorText={errorMsg}
      name="timeField"
    />
  }
});

export default FormsyTimeTextField;

[christianalfoni]

Hi there!

This seems strange. Could you try to just put your error out in a separate element? Just to make sure that it is not material-ui making any problems? Also try with a different validation rule.

[christianalfoni]

Closing old issue