add validation error message on the top of the input

* derive errorMessage from isValid handler #204 * add errorMesage styles for each style * add instruction how to validate number, close #207 * fix: value not formatted when changed programmatically

Author: bl00mber

README.md

@@ -385,6 +385,10 @@ If `enableAreaCodeStretch` is added, the part of the mask with the area code wil
  <td> showDropdown </td>
  <td> false </td>
  </tr>
+ <tr>
+ <td> defaultInvalidMessage </td>
+ <td> string </td>
+ </tr>
 </table>
 
 ### Custom localization
@@ -417,12 +421,28 @@ handleOnChange(value, data, event) {
 ```
 
 ### Check validity of the phone number
+`isValid(value, country, countries, hiddenAreaCodes)`
+
+```jsx
+<PhoneInput
+ isValid={(value, country) => {
+ if (value.match(/12345/)) {
+ return 'Invalid value: '+value+', '+country.name;
+ } else if (value.match(/1234/)) {
+ return false;
+ } else {
+ return true;
+ }
+ }}
+/>
+```
+
 ```jsx
 import startsWith from 'lodash.startswith';
 
 <PhoneInput
- isValid={(inputNumber, onlyCountries) => {
- return onlyCountries.some((country) => {
+ isValid={(inputNumber, country, countries) => {
+ return countries.some((country) => {
  return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
  });
  }}

src/index.js

@@ -81,7 +81,11 @@ class PhoneInput extends React.Component {
  onBlur: PropTypes.func,
  onClick: PropTypes.func,
  onKeyDown: PropTypes.func,
- isValid: PropTypes.func,
+ isValid: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.func,
+ ]),
+ defaultErrorMessage: PropTypes.string,
  }
 
  static defaultProps = {
@@ -113,7 +117,6 @@ class PhoneInput extends React.Component {
  autoFormat: true,
  enableAreaCodes: false,
  enableTerritories: false,
- isValid: (inputNumber, onlyCountries) => true,
  disableCountryCode: false,
  disableDropdown: false,
  enableLongNumbers: false,
@@ -143,6 +146,9 @@ class PhoneInput extends React.Component {
  enableClickOutside: true,
  showDropdown: false,
 
+ isValid: true, // (value, selectedCountry, onlyCountries, hiddenAreaCodes) => true | false | 'Message'
+ defaultErrorMessage: '',
+
  onEnterKeyPress: null, // null or function
 
  keys: {
@@ -279,16 +285,17 @@ class PhoneInput extends React.Component {
 
  // Hooks for updated props
  updateCountry = (country) => {
+ const { onlyCountries } = this.state
  let newSelectedCountry;
- if (country.indexOf(0) >= '0' && country.indexOf(0) <= '9') {
- newSelectedCountry = this.state.onlyCountries.find(o => o.dialCode == +country);
+ if (country.indexOf(0) >= '0' && country.indexOf(0) <= '9') { // digit
+ newSelectedCountry = onlyCountries.find(o => o.dialCode == +country);
  } else {
- newSelectedCountry = this.state.onlyCountries.find(o => o.iso2 == country);
+ newSelectedCountry = onlyCountries.find(o => o.iso2 == country);
  }
  if (newSelectedCountry && newSelectedCountry.dialCode) {
  this.setState({
  selectedCountry: newSelectedCountry,
- formattedNumber: this.props.disableCountryCode ? '' : this.props.prefix+newSelectedCountry.dialCode
+ formattedNumber: this.props.disableCountryCode ? '' : this.formatNumber(newSelectedCountry.dialCode, newSelectedCountry),
  });
  }
  }
@@ -301,9 +308,8 @@ class PhoneInput extends React.Component {
 
  if (value === '') return this.setState({ selectedCountry, formattedNumber: '' });
 
- let newSelectedCountry;
  let inputNumber = value.replace(/\D/g, '');
- let formattedNumber = value;
+ let newSelectedCountry, formattedNumber;
 
  // if new value start with selectedCountry.dialCode, format number, otherwise find newSelectedCountry
  if (selectedCountry && startsWith(value, selectedCountry.dialCode)) {
@@ -844,8 +850,22 @@ class PhoneInput extends React.Component {
  }
 
  render() {
- const { onlyCountries, selectedCountry, showDropdown, formattedNumber } = this.state;
- const { disableDropdown, renderStringAsFlag } = this.props;
+ const { onlyCountries, selectedCountry, showDropdown, formattedNumber, hiddenAreaCodes } = this.state;
+ const { disableDropdown, renderStringAsFlag, isValid, defaultErrorMessage } = this.props;
+
+ let isValidValue, errorMessage;
+ if (typeof isValid === 'boolean') {
+ isValidValue = isValid;
+ } else {
+ const isValidProcessed = isValid(formattedNumber.replace(/\D/g, ''), selectedCountry, onlyCountries, hiddenAreaCodes)
+ if (typeof isValidProcessed === 'boolean') {
+ isValidValue = isValidProcessed;
+ if (isValidValue === false) errorMessage = defaultErrorMessage
+ } else { // typeof === 'string'
+ isValidValue = false;
+ errorMessage = isValidProcessed;
+ }
+ }
 
  const containerClasses = classNames({
  [this.props.containerClass]: true,
@@ -855,7 +875,7 @@ class PhoneInput extends React.Component {
  const inputClasses = classNames({
  [this.props.inputClass]: true,
  'form-control': true,
- 'invalid-number': !this.props.isValid(formattedNumber.replace(/\D/g, ''), onlyCountries),
+ 'invalid-number': !isValidValue,
  'open': showDropdown,
  });
  const selectedFlagClasses = classNames({
@@ -865,6 +885,7 @@ class PhoneInput extends React.Component {
  const flagViewClasses = classNames({
  [this.props.buttonClass]: true,
  'flag-dropdown': true,
+ 'invalid-number': !isValidValue,
  'open': showDropdown,
  });
  const inputFlagClasses = `flag ${selectedCountry && selectedCountry.iso2}`;
@@ -874,6 +895,7 @@ class PhoneInput extends React.Component {
  className={containerClasses}
  style={this.props.style || this.props.containerStyle}
  onKeyDown={this.handleKeydown}>
+ {errorMessage && <div className='invalid-number-message'>{errorMessage}</div>}
  <input
  className={inputClasses}
  style={this.props.inputStyle}

src/style/bootstrap.less

@@ -17,16 +17,12 @@
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+ &.invalid-number {
+ box-shadow: 0 0 0 0.2rem rgba(222,0,0,.25);
+ }
  }
  &.invalid-number {
  border: 1px solid #f44336;
- border-left-color: #cacaca;
- &:focus {
- box-shadow: 0 0 0 1px #f44336;
- }
- }
- &.open {
- z-index: 2;
  }
  }
  .flag-dropdown {
@@ -148,4 +144,14 @@
  opacity: .7;
  }
  }
+ .invalid-number-message {
+ position: absolute;
+ z-index: 1;
+ font-size: 13px;
+ left: 25px;
+ top: -7px;
+ background: #fff;
+ padding: 0 5px;
+ color: #de0000;
+ }
 }

src/style/material.less

@@ -23,24 +23,21 @@
  }
  &.invalid-number {
  border: 1px solid #f44336;
- border-left-color: #cacaca;
  &:focus {
  box-shadow: 0 0 0 1px #f44336;
  }
  &+div:before {
  content: 'Error';
+ display: none;
  color: #f44336;
  width: 27px;
  }
  }
- &.open {
- z-index: 2;
- }
  &+div:before {
  content: 'Phone input';
  position: absolute;
  top: -7px;
- left: 19px;
+ left: 25px;
  display: block;
  background: white;
  padding: 0 5px;
@@ -170,4 +167,14 @@
  opacity: .7;
  }
  }
+ .invalid-number-message {
+ position: absolute;
+ z-index: 1;
+ font-size: 13px;
+ left: 25px;
+ top: -7px;
+ background: #fff;
+ padding: 0 5px;
+ color: #de0000;
+ }
 }

src/style/plain.less

@@ -5,7 +5,6 @@
  position: relative;
  font-size: 14px;
  letter-spacing: .01rem;
- z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 48px;
@@ -26,9 +25,6 @@
  background-color: #FAF0F0;
  }
  }
- &.open {
- z-index: 2;
- }
  }
  .flag-dropdown {
  outline: none;
@@ -37,14 +33,11 @@
  bottom: 0;
  padding: 0;
  border: 1px solid #cacaca;
- border-radius: 3px 0 0 3px;
  &.open {
  z-index: 2;
  background: #fff;
- border-radius: 3px 0 0 0;
  .selected-flag {
  background: #fff;
- border-radius: 3px 0 0 0;
  }
  }
  &:hover, &:focus, &.open {
@@ -154,4 +147,14 @@
  opacity: .7;
  }
  }
+ .invalid-number-message {
+ position: absolute;
+ z-index: 1;
+ font-size: 13px;
+ left: 46px;
+ top: -8px;
+ background: #fff;
+ padding: 0 2px;
+ color: #de0000;
+ }
 }

src/style/semantic-ui.less

@@ -5,7 +5,6 @@
  position: relative;
  font-size: 14px;
  letter-spacing: .01rem;
- z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 48px;
@@ -33,7 +32,6 @@
  &.open {
  box-shadow: rgba(34, 36, 38, 0.15) 0px 2px 3px 0px;
  border-color: rgb(150, 200, 218);
- z-index: 2;
  border-radius: 5px 5px 0 0;
  border-bottom: none;
  box-shadow: none;
@@ -170,4 +168,14 @@
  &::-webkit-scrollbar-track { background-color: #e6e6e6; }
  &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }
  }
+ .invalid-number-message {
+ position: absolute;
+ z-index: 1;
+ font-size: 13px;
+ left: 46px;
+ top: -8px;
+ background: #fff;
+ padding: 0 2px;
+ color: #de0000;
+ }
 }

src/style/style.less

@@ -5,7 +5,6 @@
  position: relative;
  font-size: 14px;
  letter-spacing: .01rem;
- z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 48px;
@@ -27,9 +26,6 @@
  background-color: #FAF0F0;
  }
  }
- &.open {
- z-index: 2;
- }
  }
  .flag-dropdown {
  outline: none;
@@ -40,6 +36,9 @@
  background-color: #f5f5f5;
  border: 1px solid #cacaca;
  border-radius: 3px 0 0 3px;
+ &.invalid-number {
+ border-color: #d79f9f;
+ }
  &.open {
  z-index: 2;
  background: #fff;
@@ -155,4 +154,14 @@
  opacity: .7;
  }
  }
+ .invalid-number-message {
+ position: absolute;
+ z-index: 1;
+ font-size: 13px;
+ left: 46px;
+ top: -8px;
+ background: #fff;
+ padding: 0 2px;
+ color: #de0000;
+ }
 }

test/dev:js/demo.js

@@ -113,7 +113,7 @@ class Demo extends React.Component {
  />
  <p>Custom regions selected: {`{['north-america', 'carribean']}`}</p>
  <PhoneInput
- country='us'
+ country='ca'
  regions={['north-america', 'carribean']}
  />
  <p>Disabled dropdown and country code</p>
@@ -186,6 +186,16 @@ class Demo extends React.Component {
  value={this.state.value}
  onChange={(value, country, e) => {console.log(value, country, e); this.setState({ value })}}
  enableAreaCodes
+ defaultErrorMessage='Invalid value'
+ isValid={(value, country) => {
+ if (value.match(/12345/)) {
+ return 'Invalid value: '+value+', '+country.name
+ } else if (value.match(/1234/)) {
+ return false
+ } else {
+ return true
+ }
+ }}
  />
  <PhoneInput
  containerStyle={{marginBottom: '15px'}}