---
title: "Validation error in a text field with the help of Bootstrap"  
description: "Validation error in a text field with the help of Bootstrap"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156619/validation-error-in-a-text-field-with-the-help-of-bootstrap  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Validation error in a text field with the help of Bootstrap

How to show [validation error](https://answers.mindstick.com/qa/93869/how-to-show-a-validation-error-in-a-text-field-with-the-help-of-bootstrap) in [text field](https://www.mindstick.com/forum/33753/how-to-get-value-from-text-field-on-button-click-in-ios) with the help of [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel)?

## Replies

### Reply by Anonymous User

To show a [validation](https://www.mindstick.com/articles/12234/validation-using-data-annotation-using-entity-framework) [error](https://yourviews.mindstick.com/view/88527/fixing-quickbooks-error-4120-reinstalling-vs-repairing) in a [text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions) [field](https://www.mindstick.com/forum/160867/does-mindstick-provide-training-for-field-marketing) with the help of Bootstrap you just need to add the is-invalid class in an input field.

Let's have an example to demonstrate validation error in a text field with the help of Bootstrap :

```
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <title>Bootstrap Dropdown</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</head>
<body>
    <div class='container d-flex justify-content-center flex-column'>
        <form class='row g-3'>
            <div class='col-md-4'>
                <label for='name' class='form-label'>Locality</label>
                <input type='text' class='form-control is-valid' id='name' value='Civil Lines' required>
                <div class='valid-feedback'>
                    Looks good!
                </div>
            </div>
            <div class='col-md-6'>
                <label for='city' class='form-label'>City</label>
                <input type='text' class='form-control is-invalid' id='city' aria-describedby='validationServer03Feedback' required>
                <div id='validationServer03Feedback' class='invalid-feedback'>
                    Please provide a valid city.
                </div>
            </div>
        </form>
    </div>
</body>
</html>
```

Hope this will help you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156619/validation-error-in-a-text-field-with-the-help-of-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
