HTML input pattern doesn't work correctly

Question

I have a form

<form method="POST">
    <p><label for="id_product_phone">Phone number:</label>
        <input type="text" pattern="\+?[0-9\s\-\(\)]+" title="Invalid phone number" name="product_phone" maxlength="20" required="" id="id_product_phone"></p>
    <p><label for="id_product_productname">Product name:</label>
        <input type="text" pattern="[A-Za-z]" name="product_productname" maxlength="100" required="" id="id_product_productname"></p>
    <p><label for="id_product_description">Description:</label>
        <input type="text" name="product_description" maxlength="500" id="id_product_description"></p>
    <p><label for="id_product_media">Picture:</label>
        <input type="file" name="product_media" required="" id="id_product_media"></p>
    <button type="submit">Надіслати</button>
</form>

and when I try to submit it says second input does not have correct data, but I write only letters what I set. Why it doesn't work? Can someone check, please?

I use Firefox.

hvkst · Accepted Answer · 2023-01-23 23:20:59Z

1

Your pattern needs a "+" at the end, but specifying the allowed length inside the pattern also does the trick :)

This makes an input over 100 characters impossible: maxlength="100" pattern="[A-Za-z]+"

This only checks the length on submit: pattern="[A-Za-z]{1,100}"

pattern="[A-Za-z]" checks for a-z, A-Z, but a length of 1, no matter the maxlength attribute.

edited Jan 23, 2023 at 23:20

answered Jan 23, 2023 at 23:15

hvkst

263 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML input pattern doesn't work correctly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related