Я начал использовать Bootstrap для достижения хорошего дизайна страницы, не прибегая к GWT (бэкэнд сделан в java)
Для моего экрана входа я скопировал этот example. Теперь я хочу отметить ошибку, например, что имя пользователя осталось пустым. Поэтому мне было интересно узнать, что такое процедура в структуре Bootstrap для этого. Или, может быть, если есть примеры, показывающие форму с ошибкой.
Я не уверен, если идея состоит в том, чтобы показать сообщение об ошибке внутри элемента ввода с красным цветом или показать его под элементом ввода или, возможно, со всплывающим окном?
(ОБНОВЛЕНО примеры для Bootstrap v4, v3 и v3)
Примеры форм с классами проверки для последних нескольких основных версий Bootstrap.
Bootstrap v4
Смотрите живую версию на codepen
<div class="container">
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
<div class="col-sm-7">
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
<div class="col-sm-7">
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
</div>
<div class="col-sm-3">
<small id="passwordHelp" class="text-danger">
Must be 8-20 characters long.
</small>
</div>
</div>
</form>
</div>
Bootstrap v3
Посмотрите живую версию на codepen
<form role="form">
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
<span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Please correct the error</span>
</div>
<div class="form-group has-info">
<label class="control-label" for="inputError">Input with info</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Username is taken</span>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess" />
<span class="help-block">Woohoo!</span>
</div>
</form>
Bootstrap v2
Смотрите живую версию на jsfiddle
Классы .error
, .success
, .warning
и .info
добавляются к .control-group
. Это стандартная разметка Bootstrap и стилизация в v2. Просто следуйте этому, и вы в хорошей форме. Конечно, вы можете выйти за пределы своих собственных стилей, чтобы добавить всплывающее окно или "встроенную флеш-память", если вы предпочитаете, но если вы следуете за соглашением Bootstrap и повесьте эти классы проверки на .control-group
, он останется постоянным и простым в управлении (по крайней мере так как вы будете продолжать пользоваться документами и примерами Bootstrap)
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
</form>
control-group
form-group
, добавить form-control
к элементам <input>
, help-inline
для help-block
и warning
для has-warning
.
Bootstrap V3:
Официальный Doc Link 1
Официальный Doc Link 2
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess" />
<span class="help-block">Woohoo!</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
<span class="help-block">Something may have gone wrong</span>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Please correct the error</span>
</div>
Можно также использовать следующий класс при использовании класса bootstrap modal (v 3.3.7)... help-inline и help-block не работали в модальном режиме.
<span class="error text-danger">Some Errors related to something</span>
Результат выглядит следующим образом:
Как правило, показывать ошибку, где происходит ошибка, лучше всего. то есть, если у кого-то есть ошибка при вводе их электронной почты, вы выделяете поле ввода электронной почты.
В этой статье есть несколько хороших примеров. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/
Также twitter bootstrap имеет приятный стиль, который помогает с этим (прокрутите вниз до раздела "Состояние проверки" ) http://twitter.github.com/bootstrap/base-css.html#forms
Выделение каждого окна ввода немного сложнее, поэтому простой способ состоял бы в том, чтобы просто поставить предупреждение о загрузке вверху с подробными сведениями о том, что пользователь сделал неправильно. http://twitter.github.com/bootstrap/components.html#alerts
Bootstrap V3:
Как только я искал функции laravel, я узнал об этой потрясающей проверке формы. Позже я изменил функции значка символа. Теперь он выглядит великолепно.
<div class="col-md-12">
<div class="form-group has-error has-feedback">
<input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Email field is required.</p></span>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-6">
<div class="form-group has-error has-feedback">
<input id="account_holder_name" name="name" type="text" placeholder="Name" class="form-control ">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Name field is required.</p></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group has-error has-feedback">
<input id="check_np" name="check_no" type="text" placeholder="Check no" class="form-control ">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Check No. field is required.</p></span>
</div>
</div>
Это выглядит так:
Как только я закончил, я подумал, что должен реализовать его и в Codeigniter. Итак, вот валидация Codeigniter-3 с помощью Bootstrap:
контроллер
function addData()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('email','Email','trim|required|valid_email|max_length[128]');
if($this->form_validation->run() == FALSE)
{
//validation fails. Load your view.
$this->loadViews('Load your view','pass your data to view if any');
}
else
{
//validation pass. Your code here.
}
}
Просмотр
<div class="col-md-12">
<?php
$email_error = (form_error('email') ? 'has-error has-feedback' : '');
if(!empty($email_error)){
$emailData = '<span class="help-block">'.form_error('email').'</span>';
$emailClass = $email_error;
$emailIcon = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
}
else{
$emailClass = $emailIcon = $emailData = '';
}
?>
<div class="form-group <?= $emailClass ?>">
<input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
<?= $emailIcon ?>
<?= $emailData ?>
</div>
</div>
Вывод:
Для Bootstrap v4 используйте: has-danger
для form-group
обертки, form-control-danger
для ввода для отображения значка (отобразит в конце ввода), form-control-feedback
в оболочку сообщения
Пример:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="form-group has-danger">
<input type="text" class="form-control form-control-danger">
<div class="form-control-feedback">Not valid :(</div>
</div>
Может использовать CSS для отображения сообщения об ошибке только при ошибке.
.form-group.has-error .help-block {
display: block;
}
.form-group .help-block {
display: none;
}
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Please correct the error</span>
</div>