Topic: Data error for Inputs view
Ilya Gabas
free
asked 5 years ago
Hi.
I have some problem with data-error for inputs:
1) Have some cases to set correct margin value for data-error message (dependent on fail content)
2) When have error-data on label, but inputs does not have some value (without class active) We can see big text (not 0.8rem) with incorrect padding above inputs
see pic.
IMAGE url https://drive.google.com/file/d/0B1HV0zoyK8XqeF8yVjk2d1l6Q1U/view?usp=sharing
<div class="container">
<div class="row mt-4">
<div class="col-lg-6 col-md-8 mx-auto">
<div class="card">
<form class="card-block" role="form" method="POST" action="{{ route('register') }}">
{{ csrf_field() }}
<div class="form-header teal accent-4">
<h2><i class="fa fa-id-card mr-2"></i> Регистрация</h2>
</div>
<div class="md-form"> {{-- form-group --}}
<i class="fa fa-user prefix"></i>
<input id="name" type="text" class="form-control validate{{ $errors->has('name') ? ' invalid mb-3' : '' }}" name="name" value="{{ old('name') }}" required>
<label for="name" data-error="{{ $errors->first('name') }}">Введите имя</label>
</div>
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input id="email" type="email" class="form-control validate{{ $errors->has('email') ? ' invalid mb-3' : '' }}" name="email" value="{{ old('email') }}" required>
<label for="email" data-error="{{ $errors->first('email') }}">Введите e-mail</label>
</div>
<div class="md-form">
<i class="fa fa-mobile prefix"></i>
<input id="phone" type="tel" class="form-control validate{{ $errors->has('phone') ? ' invalid mb-3' : '' }}" name="phone" value="{{ old('phone') ?? '+7' }}" required>
<label for="phone" data-error="{{ $errors->first('phone') }}">Введите номер моб. телефона</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix{{ $errors->has('password') ? ' active' : '' }}"></i>
<input id="password" type="password" class="form-control validate{{ $errors->has('password') ? ' invalid mb-3' : '' }}" name="password" required>
<label for="password" data-error="{{ $errors->first('password') }}" class="{{ $errors->has('password') ? ' active' : '' }}">Введите пароль</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input id="password-confirm" type="password" class="form-control validate" name="password_confirmation" required>
<label for="password-confirm">Повторите пароль</label>
</div>
<div class="text-center">
<button class="btn teal waves-effect waves-light" type="submit">Зарегистрироваться</button>
</div>
</form>
</div>
</div>
</div>
</div>
Sorry for my english
Add comment
Ilya Gabas
free
answered 5 years ago
may be use like this for width of error
.md-form .prefix~label {
margin-left: 3rem;
width: 92%;
width: calc(100% - 3rem)
}
@media only screen and (max-width: 992px) {
.md-form .prefix~label {
width:86%;
width: calc(100% - 3rem)
}
}
@media only screen and (max-width: 600px) {
.md-form .prefix~label {
width:80%;
width: calc(100% - 3rem)
}
}
For empty inputs do this: (but I think its not a correct style)
input[type=password].invalid+label:after,
input[type=password]:focus.invalid+label:after {
top: 40px;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags