edwardfxiao / react-inputs-validation Goto Github PK
View Code? Open in Web Editor NEWA react component for form inputs validation. Online demo examples
Home Page: https://edwardfxiao.github.io/react-inputs-validation/
License: MIT License
A react component for form inputs validation. Online demo examples
Home Page: https://edwardfxiao.github.io/react-inputs-validation/
License: MIT License
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"
/>
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,
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>
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.
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/.
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,
}}
/>
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.
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"
}
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?
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 ?!
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
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!
invariant vioation View config not found for name input make sure componenet names with capital letter
How do you change the text color of the validation message and the border color from red to a different color?
Question:
What is the proper way to add my own styles or modify the ones that are added?
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.
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!
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 ?
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 ?!
validationOption.custom | Opt | Func | Custom function that returns isValid (inputValue) => { return true|false; }
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.