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 >
<input type="text" id="abc_input" name="abc_input" required="" autocomplete="off" pattern=".*\S .*">
<div >Please provide a valid input value</div>
<div >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 >
<textarea id="abc_textarea" name="abc_textarea" required="" autocomplete="off" pattern=".*\S .*">
<div >Please provide a valid value</div>
<div >Looks good!</div>
</div>
It will be of great help to me if anyone suggests me to validate textarea.
CodePudding user response：
Hey I found that there is closing </textarea> missed in code snippet. Just try below snippet hope will work.
<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 >
<form method="POST" >
<div >
<input type="text" id="abc_input" name="abc_input" required="" autocomplete="off" pattern=".*\S .*">
<div >Please provide a valid input value</div>
<div >Looks good!</div>
</div>
<div >
<textarea id="abc_textarea" name="abc_textarea" required="" autocomplete="off" pattern=".*\S .*"></textarea>
<div >Please provide a valid value</div>
<div >Looks good!</div>
</div>
</form>
</div>CodePudding user response：
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