search

materializecss / materialize

Materialize, a web framework based on Material Design
https://materializeweb.com/
MIT License
912 stars 105 forks source link

[Bug]: input field validation doesnt work #437

Open lschwend opened 11 months ago

lschwend commented 11 months ago

Before submitting...

Context

IIn Materialize 1.0.0, input field validation occurred automatically by adding the attributes data-error and data-success. Additionally, enabling regex validation for input fields would enhance functionality.

Current Behavior

The data-error does nothing when you write an invalid e-mail for example.

Codepen: https://codepen.io/lschwend98/pen/wvNXvbz

Expected behavior

Validate the type and add the error or success mesage to the input field.

Possible Solutions or Causes

Maybe the functionality was removed and could be added again?

Steps to reproduce

No response

Your Environment

Jerit3787 commented 11 months ago

Hi, yeah thanks for reporting it. I have created a PR for this fix. Apparently, many functions were removed due to jQuery. I'm sure this might affecting other components as well. While you're here, please do test it out and check other types of input as well. Thanks :)

lschwend commented 11 months ago

Hi, yeah thanks for reporting it. I have created a PR for this fix. Apparently, many functions were removed due to jQuery. I'm sure this might affecting other components as well. While you're here, please do test it out and check other types of input as well. Thanks :)

Thank you for your PR, looks good. How can I test, if it also works with type="date" or type="number" for Example? Also would be great if it works with required attribute?

Jerit3787 commented 11 months ago

Hi, yeah thanks for reporting it. I have created a PR for this fix. Apparently, many functions were removed due to jQuery. I'm sure this might affecting other components as well. While you're here, please do test it out and check other types of input as well. Thanks :)

Thank you for your PR, looks good. How can I test, if it also works with type="date" or type="number" for Example? Also would be great if it works with required attribute?

https://github.com/materializecss/materialize/suites/18597325789/artifacts/1080727369 you can replace the files with these. Not sure, I might need to check deeper if any old features were removed.

Jerit3787 commented 11 months ago

I dropped myself from fixing this issue. Sorry, I don't currently have time to complete this.

gselderslaghs commented 2 weeks ago

@Jerit3787 could you provide me a brief description on what still needs to be done to address this issue?

gselderslaghs commented 2 weeks ago

*Update: As I looked a bit deeper into this issue, as there is HTML5 validation introduced in 2013, this seem to work properly on submit in combination with the Materialize library, the above CodePen example is apparently missing the submit button. In case of form input without a submit button, with AJAX for example, check out the Javascript validation API:

CodePen example

Jerit3787 commented 2 weeks ago

@Jerit3787 could you provide me a brief description on what still needs to be done to address this issue?

Yeah, so far there materialize doesn't check for any validation methods, namely email and others. In my PR, I've reimplemented the validation feature that was removed before this. You can take a look at it for any reference

Jerit3787 commented 2 weeks ago

*Update: As I looked a bit deeper into this issue, as there is HTML5 validation introduced in 2013, this seem to work properly on submit in combination with the Materialize library, the above CodePen example is apparently missing the submit button. In case of form input without a submit button, with AJAX for example, check out the Javascript validation API:

CodePen example

Yeah the HTML5 validation still works, but there is no feedback in terms of the Text Input component like a red bar showing error / customized error message. In previous implementation, materialize will check once user leaves focus (i think?) or press enter on keyboard and instantly shows a red if the validation found an error on the user inputs.