CODEWITHSUNDEEP
jqueryvalidationbootstrap-5
Ishpreet
Ishpreet

Reputation: 669

bootstrap 5 form validation is not working for textarea pattern attribute?

I have used bootstrap 5 form validation method for my forms. https://www.w3schools.com/bootstrap5/bootstrap_form_validation.php

I have tried pattern attribute with input elements

<div class="row">
     <input type="text" class="form-control" id="abc_input" name="abc_input" required="" autocomplete="off" pattern=".*\S+.*">
    <div class="invalid-feedback">Please provide a valid input value</div>
    <div class="valid-feedback">Looks good!</div>
</div>

In above sample code, I have attempted for required field and pattern attribute to check "only white space is not allowed". If I skip pattern attribute, then input field allows white space characters to be filled and that's against our required field rule.

The same I have tried to apply for textarea, but pattern attribute is ignored by browser and thus bootstrap 5 validation also not works correctly.

<div class="row">
         <textarea class="form-control" id="abc_textarea" name="abc_textarea" required="" autocomplete="off" pattern=".*\S+.*">
        <div class="invalid-feedback">Please provide a valid value</div>
        <div class="valid-feedback">Looks good!</div>
    </div>

It will be of great help to me if anyone suggests me to validate textarea.

Upvotes: 0

Views: 2037

Answers (2)

Mahesh Thorat
Mahesh Thorat

Reputation: 1

I found that there is closing </textarea> missed in code snippet.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container mt-3">
    <form method="POST" class="was-validated">
        <div class="row">
            <input type="text" class="form-control" id="abc_input" name="abc_input" required="" autocomplete="off" pattern=".*\S+.*">
            <div class="invalid-feedback">Please provide a valid input value</div>
            <div class="valid-feedback">Looks good!</div>
        </div>
        <div class="row">
            <textarea class="form-control" id="abc_textarea" name="abc_textarea" required="" autocomplete="off" pattern=".*\S+.*"></textarea>
            <div class="invalid-feedback">Please provide a valid value</div>
            <div class="valid-feedback">Looks good!</div>
        </div>
    </form>
</div>

Upvotes: 2

Nealium
Nealium

Reputation: 2268

As Matthew has said, TextArea fields can't use the pattern attribute.

Check out Yann Dìnendal's solution here: (& upvote it if you like it!)

It's probably the closest you'll get.. but!- on the plus: at least it's a generic function you can use elsewhere

Upvotes: 0

Related Questions