有没有办法在 Django 中设置字段警报的样式？

Question

我正在研究我网站的样式，我想为表单的这一部分设置样式：我试过了，field.errors但不是这样。有任何想法吗？

Answer 1

JS您可以在代码中更改此样式

访问此页面

(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>