When the inputs contain square brackets [ ] (ex: <input t

Doesn't work with inputs containing square brackets [ ] in the name about bouncer HOT 7 CLOSED

cferdinandi commented on May 26, 2024

Doesn't work with inputs containing square brackets [ ] in the name

from bouncer.

Comments (7)

cferdinandi commented on May 26, 2024

The issue is only with IDs and querySelector() for the error messages. The inputs themselves seem to be fine. I pulled in your escape function in https://github.com/cferdinandi/bouncer/releases/tag/v1.2.1, gave you attribution, and only use it in getFieldID().

This carries over to all the places where it's used without have to include it explicitly, keeping the code more DRY. Thanks for your help here!

from bouncer.

smcyr commented on May 26, 2024

I tried with the new version (1.2.2) and I have the same problem as before. The error message is created each time you validate as you can see in my screenshot. Thanks

from bouncer.

cferdinandi commented on May 26, 2024

Please provide a reduced test case

from bouncer.

smcyr commented on May 26, 2024

You can test with this html file and click multiple times on submit without filling anything. And after that, try filling the radio buttons and email input. You can see that there are multiple error messages and that they don't disappear. Thanks

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test Validation</title>
        <style>
            .error {
                border-color: red;
                color: red;
            }

            .error + label {
                color: red;
            }

            .error-message {
                color: red;
            }
        </style>
    </head>
    <body>
        <form>
            <input id="category-1" type="radio" required="required" name="ContactForm[category]" value="category-1"><label for="category-1">Category 1</label>
            <input id="category-2" type="radio" required="required" name="ContactForm[category]" value="category-2"><label for="category-2">Category 2</label>
            <input id="category-3" type="radio" required="required" name="ContactForm[category]" value="category-3"><label for="category-3">Category 3</label>
            <br>
            <input type="email" required="required" name="ContactForm[email]" placeholder="Email">
            <br>
            <button>Submit</button>
        </form>

        <script src="https://cdn.jsdelivr.net/gh/cferdinandi/bouncer/dist/bouncer.polyfills.min.js"></script>
        <script>
            var validate = new Bouncer('form', {
                messageAfterField: false
            });
        </script>
    </body>
</html>

from bouncer.

cferdinandi commented on May 26, 2024

The CDN hasn't flushed it's cache yet, but when it does, v1.2.3 should finally address this. Reduced test case: https://codepen.io/cferdinandi/pen/rQoxyM

Also, thank you so much for your help and for providing a reduced test case to work with!

from bouncer.

cferdinandi commented on May 26, 2024

And CDN now has the latest version if you want to check the demo

from bouncer.

smcyr commented on May 26, 2024

It works now, thanks!

from bouncer.

Doesn't work with inputs containing square brackets [ ] in the name about bouncer HOT 7 CLOSED

Comments (7)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent