是否可以使用 Laravel Validation 中的 @error 實際覆寫 TailwindCSS 類？
我的輸入都沒有邊框，但我只想在拋出驗證錯誤時應用邊框（即紅色）。
<form action="/contact" method="POST" class="flex flex-col space-y-8">
{{ csrf_field() }}
<div class="flex flex-col space-y-8 md:flex-row md:space-y-0 md:space-x-5">
<div class="relative">
<label for="text" class="absolute -top-6 left-3 text-sm after:content-['*'] after:ml-0.5 after:text-red-500">Full Name</label>
<input type="text" class="form-input rounded-lg bg-blue-200 border-none shadow @error('full_name') border border-red-500 @enderror" name="full_name" placeholder="John Doe" value="{{ old('full_name') }}" required />
@error('full_name')
<div hljs-number">500">{{ $message }}</div>
@enderror
</div>
<div hljs-string">">
<label for="email" hljs-number">6 left-3 text-sm after:content-['*'] after:ml-0.5 after:text-red-500">E-mail</label>
<input type="email" hljs-number">200 border-none shadow @error('email') border border-red-500 @enderror" name="email" placeholder="[email protected]" value="{{ old('email') }}" required />
@error('email')
<div hljs-number">500">{{ $message }}</div>
@enderror
</div>
</div>
<div hljs-string">">
<label for="text" hljs-number">6 left-3 text-sm">Phone Number</label>
<input type="text" hljs-number">200 border-none shadow @error('phone_number') border border-red-500 @enderror" name="phone_number" placeholder="(123) 456-7890" value="{{ old('phone_number') }}" />
@error('phone_number')
<div hljs-number">500">{{ $message }}</div>
@enderror
</div>
<div hljs-string">">
<label for="textarea" hljs-number">6 left-3 text-sm after:content-['*'] after:ml-0.5 after:text-red-500">Message</label>
<textarea type="textarea" hljs-number">200 border-none shadow @error('message') border border-red-500 @enderror" name="message" rows="6" placeholder="Message" value="{{ old('message') }}" required></textarea>
@error('message')
<div hljs-number">500">{{ $message }}</div>
@enderror
</div>
<button type="submit" hljs-number">1/2 self-end bg-neutral-900 uppercase font-black text-blue-400 border-none p-2">Send</button>
</form>
由于@error在border-none之后，我認為它會覆寫它......
uj5u.com熱心網友回復：
使用以下選項指定新的輸入欄位類
<input type="text" class="form-input rounded-lg w-full bg-blue-200 @if($errors->has('phone_number')) border border-red-500 @else border-none shadow @endif" name="phone_number" placeholder="(123) 456-7890" value="{{ old('phone_number') }}" />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/443901.html