Отображать предупреждающее сообщение с определенным форматом CSS - PullRequest
Новая
       21

Отображать предупреждающее сообщение с определенным форматом CSS

0 голосов
/ 30 мая 2019

Я увидел диалоговое окно, как показано на рисунке ниже,

enter image description here

Это предупреждающее сообщение для ошибочного формата MAC-адреса после введенного текста.Я хотел бы проверить входные данные сразу же после их отправки.Где я могу найти этот стиль CSS?

Ответы [ 2 ]

1 голос
/ 30 мая 2019

Попробуйте это: 

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 112.5%;
    margin-left: auto;
    margin-right: auto;
    max-width: 40em;
    width: 88%;
}  

/**
 * Form Styles
 */
label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.label-normal {
    font-weight: normal;
}

.pattern {
    color: #808080;
    font-size: 0.8em;
    font-weight: normal;
}

.supports-color .color,
.supports-date .date,
.supports-time .time,
.supports-month .mont {
    display: none;
}

input,
select {
    display: inline-block;
    font-size: 1em;
    margin-bottom: 1em;
    padding: 0.25em 0.5em;
    width: 100%;
}

[type="checkbox"],
[type="radio"] {
    margin-bottom: 0.5em;
    width: auto;
}

.button {
    background-color: #0088cc;
    border: 1px solid #0088cc;
    border-radius: 1px;
    color: #ffffff;
    display: inline-block;
    font-size: 0.9375em;
    font-weight: normal;
    line-height: 1.2;
    margin-right: 0.3125em;
    margin-bottom: 0.3125em;
    padding: 0.5em 0.6875em;
    width: auto;
}

.button:active,
.button:focus,
.button:hover {
    background-color: #005580;
    border-color: #005580;
    color: #ffffff;
    text-decoration: none;
}

.button:active {
    box-shadow: inset 0 0.15625em 0.25em rgba(0, 0, 0, 0.15), 0 1px 0.15625em rgba(0, 0, 0, 0.05);
}
<form>
    <div>
        <label for="text">Text Input</label>
        <input type="text" id="text" required>
    </div>

    <div>
        <label for="minmaxlength">Text with Min and Max Length</label>
        <input type="text" id="minmaxlength" minlength="3" maxlength="12">
    </div>

    <div>
        <label for="password">Password (must contain at least 1 uppercase character, 1 lowercase character, and 1 number)</label>
        <input type="password" id="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" required>
    </div>

    <div>
        <label for="passwordwithtitle">Password with Title Attribute</label>
        <input type="password" id="passwordwithtitle" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" title="Please include at least 1 uppercase character, 1 lowercase character, and 1 number." required>
    </div>

    <div>
        <label for="passwordcombined">Password with Pattern and Min Length</label>
        <input type="password" id="passwordcombined" minlength="8" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" title="Please include at least 1 uppercase character, 1 lowercase character, and 1 number." required>
    </div>

    <input type="submit" class="button" value="Submit">
</form>
0 голосов
/ 30 мая 2019

Если вам нужно проверить немедленно, вы должны добавить атрибут novalidate в тег <form>. затем в js-коде вы должны добавить прослушиватель к входу, и при каждом изменении вы будете проверять и показывать желаемое сообщение. 

$('input').on('change keyup keydown',()=>{//validation code; })
...