gokulakannant / react-form-input-validation Goto Github PK

In documentation says:

confirmed
The field under validation must have a matching field of foo_confirmation. For example, if the field under validation is password, a matching password_confirmation field must be present in the input.

Code:
this.form.useRules({ first_name: "required", last_name: "required", email: "required|email", password: "required|passwordchk|confirmed" });

Form:
<input type="password" className={this.state.errors.password ? "form-control is-invalid" : "form-control"} name="password" id="password" placeholder="Create password" onBlur={this.form.handleBlurEvent} onChange={this.form.handleChangeEvent} value={this.state.fields.password} noValidate /> <input type="password" className={this.state.errors.password_confirmation ? "form-control is-invalid" : "form-control"} name="password_confirmation" id="password_confirmation" placeholder="Confirm password" onBlur={this.form.handleBlurEvent} onChange={this.form.handleChangeEvent} value={this.state.fields.password_confirmation} noValidate />

Output:

errors
{password: "The password confirmation does not matc…}
password
"The password confirmation does not match."

fields
{email: "", first_name: "", last_name: "", password…}
email
""
first_name
""
last_name
""
password
"Pass@123."
password_confirmation
"Pass@123."
isValidatorUpdate
true

everytime TextField from material ui is out of focus, the form refreshes itself (the error goes away), but when the select attribute is used on the TextField, the error doesn't go away even when i'm out of focus

Codesandbox : https://codesandbox.io/s/react-form-input-validation-demp-forked-ye1m1

Hi

I have field password and not required, like that

If I not enter this field, it's working, but if I enter this field, it show error

When input text and when submit form.

Please help me!
Thanks

Hi, how can I possibly use the react-form-validation API in a React Functional Component and useState Hooks? Thanks.

Hi,
I get this error "TypeError: Cannot read properties of null (reading 'endsWith') at bundle.js:1:1" when submit form, (focus is working).

Please help me.
Thanks

Hi,

I've been trying to use the rule confirmed for a long time but i couldn't do it, please explain how to use it, and why is it not like the rule 'different:attribute'?
This is my code:

this.form.useRules({
        email: "required|email",
        password: "required|custom_password_rule",
        password_confirmation: "confirmed",
});

Now how to link password with password_confirmation, shall i do it in the html code? how?

Thanks!

How I can handle validation on input type date with rules like before, before_or_equal, after, after_or_equal? I just can't figure out how to use it right, so i always end up with nothing or unexpected results..

I have created a couple of fields all same.
`
//This is the code inside of my render return
this.state.fields.features.map((feature, index) => {
if (index != 0) {
return (

-

<Input type="text" onChange={(e) => this.handleChangeOfFeature(e, index)} className="float-left ml-1" name="features[]" value={feature} placeholder="feature" onBlur={this.form.handleBlurEvent}
onChange={this.form.handleChangeEvent} />

<Button type="button" color="primary" onClick={() => { this.addFeature("") }}>+


{console.log(this.state.errors.features)}
{/* {this.state.errors.features[index] ? this.state.errors.features[index] : ""} /}

)
} else {
return (
<Input type="text" onChange={(e) => this.handleChangeOfFeature(e, index)} className="float-left ml-1" name="features[]" value={feature} placeholder="feature" onBlur={this.form.handleBlurEvent}
onChange={this.form.handleChangeEvent} />

<Button type="button" color="primary" onClick={() => { this.addFeature("") }}>+


{console.log(this.state.errors.features)}
{/ {this.state.errors.features[index] ? this.state.errors.features[index] : ""} */}

)
}
})

//This is add same field
addFeature(value) {
let fields = this.state.fields;
fields["features"] = [...this.state.fields.features, value];
this.setState({
fields
});
}

This is what's inside my constructor method
this.state = {
fields: {
avatar: "",
features: []
},
errors: {
},
}
this.form = new ReactFormInputValidation(this);
this.form.useRules({
features: "required|array",
});
this.form.onformsubmit = (fields) => {

}
`
The problem is it's ok with empty strings. Laravel had rule to even validate inside of the array like.
array.*:"required"
How can i make it not ok with empty strings inside of array.

Hi, how would you use this with radios and checkboxes, it's kind of confusing and I can't seem to get this to work for radios and checkboxes. I'm trying to get the check box to work for accepting "Terms of Service" for example, but the "accepted" rule doesn't seem to work.