I just tried to implement this library to my project, which use below dependencies, It work on Chrome and firefox, but IE console SCRIPT1003: Expected ':' error in the Radiobox.js.
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.5.5",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"babel-preset-es2015-ie": "^6.7.0",
"chai": "^4.2.0",
"css-loader": "^3.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"ignore-styles": "^5.0.1",
"jquery": "^3.4.1",
"jsdom": "^15.1.1",
"mini-css-extract-plugin": "^0.8.0",
"mocha": "^6.2.0",
"postcss-loader": "^3.0.0",
"react-hot-loader": "^4.11.1",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.3.0",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"@babel/polyfill": "^7.6.0",
"bootstrap": "^4.3.1",
"bootstrap-datetimepicker-npm": "^4.17.37-npm",
"es6-promise": "^4.2.8",
"isomorphic-fetch": "^2.2.1",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-inputs-validation": "^4.1.8"
}

Hi, thanks for the great job
i used this module in my project but now i need to use it along with mterializecss but there are lots of problem in doing it for example:
when something is wrong in materializecss inputs, a red line appears in the bottom of that input field but with using Textbox or Textarea of react-inputs-validation there wouldn't be such a thing or another problem that happened for me is using meterializecss icon along with inputs this is a common way to define inputs like this:

<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>

but if i use this with this module the CSS of input field would badly break up.
is there any possible solution for using these together ?!

Describe the bug
Unable to modify the 'checked' property of the Checkbox from an outter event because the 'checked' is given by the state, and once the component is created - it can not be modified from outside.
The getDerivedStateFromProps would be the solution:

function getDerivedStateFromProps(nextProps, prevState) {
// TODO: This was from componentWillReceiveProps()
if ((nextProps.validate === true && prevState.validate === false) || (nextProps.checked != prevState.checked)){
return {
validate : nextProps.validate,
checked : nextProps.checked
}
}

  return null;

Hi, thanks for the great job
i used this module in my project but now i need to use it along with mterializecss but there are lots of problem in doing it for example:
when something is wrong in materializecss inputs, a red line appears in the bottom of that input field but with using Textbox or Textarea of react-inputs-validation there wouldn't be such a thing or another problem that happened for me is using meterializecss icon along with inputs this is a common way to define inputs like this:

<i class="material-icons prefix">account_circle</i> <input id="icon_prefix" type="text" class="validate"> <label for="icon_prefix">First Name</label>

but if i use this with this module the CSS of input field would badly brake up.
is there any possible solution for using these together ?!

When you validate your input field once and the error message appear, if you update the value from other methods (I tried by getting the value from an api call and updating the value in state, which updates the value but message still remains) than focussing the input field and trying to update it, the message won't go away, even if you trigger the validation by setting validate to true. the only option is to click on the input field and onBlur it will validate the specific field and remove the message.

Describe the solution you'd like
If the same validation happening on blur event, could be done for validate as well, I think it'll be better.

Tried to implement the same example here https://edwardfhsiao.github.io/react-inputs-validation/
but css/styles are not working,

also i have a submit button and If i hit submit, without even giving any focus to the text box, it happily goes forward without highlighting that its mandatory. below is the config
validate={true}
validationCallback={ e => this.setState({hasError: e})}

Thanks,

Hello, I tried to create simpale form like the example , the validation and all works perfect but I can't nevigate through the inputs by using the tab key.

any suggestion why ?

Question:
What is the proper way to add my own styles or modify the ones that are added?

I'm getting errors while trying to use Textbox.

First I got

* classnames in ./node_modules/react-inputs-validation/lib/components/Radiobox.js, ./node_modules/react-inputs-validation/lib/components/Textarea.js and 3 others

I installed classnames library and now I get:

Error in ./lib/react-inputs-validation.min.css
Module parse failed: Unexpected token (1:81) You may need an appropriate loader to handle this file type.

I'm using NextJS for this:

<Textbox
  placeholder="John Doe"
  classNameInput="input"
  type="text"
  id="name"
  maxLength="10"
/>

I can't seem to remove completely the error message. I only need the validation given by the callback.
So when the input is empty and onKeyUp is activated, the message 'cannot be empty' displays.
I just want to remove that message but can't with the info given in the docs.

This is a minified version of the input I'm using

<Textbox
type={field.type}
name={ name }
tabIndex='1'
classNameInput='form-control'
onChange={ (value, e) => {
this.handleChange(value, name)
}}
value={ field.value }
validationCallback={res => {
let fields = this.state.fields;
fields[name].isValid = !res;
this.setState({ fields: fields}, () => {this.validate()})}
}
onKeyUp={ e => {} }
validationOption={{
reg : reg,
showMsg: false,
regMsg: null,
}}
/>

Hi, I am trying to use Select Component and as the document suggests it needs to have the value in the format mentioned below.

[{id: '1', name: 'Twin Peaks'}]

But using this format throws this error:
Uncaught TypeError: Cannot read property 'name' of undefined in Select.js:384

Where it works correctly when the first option is passed like:

[{id:"", name: "Select Country"},
{id:"United States", name: "United States"}]

That means the first id has to be blank. Please confirm if this is intentional.

Hey Dude,

Nice simple library, however the regex test fails while checking for hexadecimal characters

reg:/[0-9a-f]+/i, //Optional.[Bool].Default: "" Custom regex.

I tried every combination of expression here: https://stackoverflow.com/questions/9221362/regular-expression-for-a-hexadecimal-number
It works if you type a single non hexadecimal character into the box, but if you mix them up with hex chars it doesn't work for some reason (a 64 char bitcoin key for example: 7BBC52B8945AA22779E37937D909CCA744E92310A89DD9A531D06ABD8E3A0B97).
Also, I am trying to trim the entered values of whitespace and am wondering if the Textbox's bounded onChange function could be overridden somehow?

Like the following
onChange={this.handleChangeRecipientsPublicKey}

Thanks,

Freddie

I get the following error when i try to use the Select component:

TypeError: Cannot read property 'name' of undefined
Index.render
node_modules/react-inputs-validation/lib/components/Select.js:384
  381 |   _react2.default.createElement(
  382 |     'div',
  383 |     { className: STYLES['ellipsis'], style: { width: '100%' } },
> 384 |     item.name
  385 |   ),
  386 |   _react2.default.createElement('div', { className: dropdownIconClass })
  387 | );

Here is my code

<div className="col-xs-12 col-md-6">
    <div className="form-group">
          <label>Beneficiary Bank Account Location</label>
              <Select
                  name="location"
                  className="form-control"
                  value={this.state.location}
                  onChange={e => this.handleChange(e)}
                  disabled={this.state.isEditForm}
                  optionList={[
                     {id: "1", name: "Home Country"},
                     {id: "2", name: "Host Country"},
                     {id: "3", name: "Other Country"},
                  ]}
              />
       </div>
   </div>

Currently, no TS declarations are exported with the package, which does not make it developer-friendly. Even though, I see typescript is being used in the development of this package. Please, just add "declaration": true, to your tsconfig, and modify your build scripts accordingly if needed.

validationOption.custom | Opt | Func | Custom function that returns isValid (inputValue) => { return true|false; }

• https://github.com/edwardfhsiao/react-inputs-validation/blob/master/src/js/Inputs/Textbox.js ln: 107 - inputValue can't be set.

How do you change the text color of the validation message and the border color from red to a different color?

There is a requirement that requires me to add a link into the message on error
When the user types data into the textbox input, base on a condition I need to show an error message that contains a link.

Solution
It would be greate if MessageOnError and CustomFunc support React Component

invariant vioation View config not found for name input make sure componenet names with capital letter

It is a great component, but it would be better if you can find a way to propagate maxlength also for TextBox .
Is that possible?
Thank you!

With accessibility in mind you should never change te natural tab order of element son the page. Especially putting items on tabindex -1 ensures that keyboard users won't be able to use these fields properly.

Since there should never be any reason to change the tabindex please remove this from the inputs.

I am using component of this Library for display the list for Countries and as you can imagine, the list can be pretty long. And If I try to select the option by typing as traditional select work, its not working. Is there any way to do that?

I have a payment form. I've created Year and Month input using the Select component. It sets the state correctly, But validationCallback always returns hasErr=true. Both the id, name params in each option are string, and I've set it to check just for required: true.

const years = [
  {id: "2020", name: "2020"}
  {id: "2021", name: "2021"}
  {id: "2022", name: "2022"}
  {id: "2023", name: "2023"}
  {id: "2024", name: "2024"}
]

<Select
  attributesInput={{ name: "card_exp_year" }}
  value={card_exp_year}
  validate={validating}
  optionList={[
    { id: "", name: "Select Year" },
    ...years
  ]}
  onChange={(val, e) => 
    this.handleChange({ target: { name: 'card_exp_year', value: val.id } })
  }
  validationOption={{ name: 'Year', required: true }}
  validationCallback={hasErr =>
    this.handleValidation("card_exp_year", hasErr)
  }
/>

Besides, the same issue is there in your demo https://edwardfhsiao.github.io/react-inputs-validation/.

Hello,

For Textbox: it is possible to add a msgOnEmpty property to allow a custom message(when input is required and empty) instead of Msg.empty(nameText) ? or a way to override the Message object.

Thank you!