lundi 19 février 2018

Bootstrap 4 server side error message with laravel

I am using bootstrap 4, its client side validation works fine but if I want to show Laravel server side validation error messages along with respective field.

HTML (In laravel).

<form method="POST" accept-charset="UTF-8" needs-validation" novalidate>
<div class="form-group">
    <label for="fullname"> Full Name </label>
    <input type="text" class="form-control @if($errors->first('name')) is-invalid @endif" name="name" value="" placeholder="Full Name" id="name" required>
    <div class="invalid-feedback">
        @if($errors->first('name')) {!! $errors->first('name') !!} @else Name is required. @endif 
    </div>
</div>
<div class="form-group">
    <label for="fullname"> Phone # </label>
    <input type="number" class="form-control @if($errors->first('phone')) is-invalid @endif" name="phone" value="" placeholder="Phone #" id="phone" required>
    <div class="invalid-feedback">
        @if($errors->first('phone')) {!! $errors->first('phone') !!} @else Phone is required. @endif
    </div>
</div>
<button type="submit" value="submit"></button>

Javascript (provided on bootstrap 4 docs for client side)

(function() {
        'use strict';
        window.addEventListener('load', function() {
            var forms = document.getElementsByClassName('needs-validation');
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();

Laravel (validation rules)

$this->validate($request,[
'name' => 'required',
'phone' => 'required'
]);

In the code you can see I have achieved this.
But I want a script to show server side validation errors like the one bootstrap have provide to show the validations error client side errors.

I hope you guys may understand what I am asking.

Thank you.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire