Is there any way to style the field alerts in Django?

Question

I'm working on the style of my website and I'd like to style this part of the form:

I tried with field.errors but that's not it. Any ideas?

If you don't want that popup you can put `novalidate` on your form tag, it will disable default client side validation. Can you post your template code, that will be helpful. — k33da_the_bug, Apr 27 '20 at 03:37
you can use this answer [How to change warning text when pattern is used in input?](https://stackoverflow.com/a/11739366/8524381) — mohsen Zare, Apr 27 '20 at 11:43

score 1 · Accepted Answer · answered Apr 27 '20 at 12:00

you can change this style with JS in your code

(function() {
    
    var input              = document.getElementById('username');
    var form               = document.getElementById('form');
    var elem               = document.createElement('div');
            elem.id            = 'notify';
            elem.style.display = 'none';

            form.appendChild(elem);

    input.addEventListener('invalid', function(event){
        event.preventDefault();
        if ( ! event.target.validity.valid ) {
            input.className    = 'invalid animated shake';
            elem.textContent   = 'Username should only contain lowercase letters e.g. john';
            elem.className     = 'error';
            elem.style.display = 'block';
        }
    });

    input.addEventListener('input', function(event){
        if ( 'block' === elem.style.display ) {
            input.className = '';
            elem.style.display = 'none';
        }
    });

})();

 html {
        box-sizing: border-box;
    }

    *,
    *:before,
    *:after {
            box-sizing: inherit;
    }

    body {
        font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
        background-color: #ECEFF1;
    }
    form {
        max-width: 300px;
        margin-top: 60px;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
        position: relative;
        padding-top: 80px;
    }
    label,
    input {
            display: block;
    }
    label {
        font-size: 12px;
        text-transform: uppercase;
        color: #B0BEC5;
        margin-bottom: 10px;
    }
    input {
            width: 100%;
            padding: 10px;
            outline: 0;
            border: 2px solid #B0BEC5;
    }
    input.invalid {
            border-color: #DD2C00;
    }

    #notify {
        margin-top: 5px;
        padding: 10px;
        font-size: 12px;
        width: 100%;
        color: #fff;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    #notify.error {
        background-color: #DD2C00;
    }

<form id="form">
    <div>
        <label for="username">Username</label>
        <input name="username" type="text" placeholder="Username" pattern="[a-z]{1,15}" id="username" value="12345">
    </div>
</form>

Is there any way to style the field alerts in Django?

1 Answers1