Я надеюсь, что вы все можете дать мне толчок в правильном направлении. Я создаю форму, используя HTML / CSS & самозагрузки. Форма работает вроде как, но я хотел бы использовать предложения начальной загрузки состояний проверки. Как мне использовать это правильно? Поле должно становиться зеленым только при правильном заполнении и красным при возникновении ошибки.
Может ли кто-нибудь дать мне пример того, как я могу показать правильное состояние? (такой зеленый, когда правильно заполнен, красный, когда нет)
<div class="container">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="row">
<div class="col-xs-3" style="padding-right:5px;">
<label for="ex1" ></label>
<input class="form-control inputForm" id="ex1" name="voornaam" type="text" placeholder="Voornaam">
</div>
<div class="col-xs-3" style="padding-left:5px;">
<label for="ex2"></label>
<input class="form-control inputForm" id="ex2" type="text" name="achternaam" placeholder="Achternaam"> </div> </div><div class="row">
<div class="col-xs-6">
<label for="ex3"></label>
<input class="form-control inputForm" id="ex3" name="email" type="text" placeholder="Voer je e-mailadres in">
</div></div>
<div class="row">
<div class="col-xs-6">
<label for="ex3"></label>
<input class="form-control inputForm" id="ex3" name="wachtwoord" type="password" placeholder="Wachtwoord">
</div></div>
<div class="row">
<div class="col-xs-6">
<input class="btn btn-primary btn-lg active" type="submit" value="Registeren" style="Float: right; margin-top: 15px; width: 100%;">
</div></div>
</form>
</div>
Используйте классы .has-warning
, .has-error
, или же .has-success
,
Состояние ошибки:
<input class="form-control inputForm has-error" id="ex1" name="voornaam" type="text" placeholder="Voornaam">
Правильное состояние:
<input class="form-control inputForm has-success" id="ex1" name="voornaam" type="text" placeholder="Voornaam">
Других решений пока нет …