client validation in laravel 5.4

Question

I have used this https://github.com/proengsoft/laravel-jsvalidation for client side validation. Server side validation is working but client side onFocusout validation is not fire.
In composer file Laravel 5.4 "proengsoft/laravel-jsvalidation": "^2.0" In Controller

    <?php 
 protected $validationRules=[
        'email' => 'required|unique|max:255',
        'name' => 'required',
        'password' => 'required',
        'userRoleId' => 'required'
    ];
public function create() {
        $model = new Admuser();
       $validator = JsValidator::make($this->validationRules); 

        $userRoleData = Userrole::orderBy('role')->pluck('role', 'userRoleId'); 

        return view('adminlte::portaluser.create')->with([
            'validator' => $validator,
            'userRoleData' => $userRoleData,
        ]); 

    }
?>

And in View file for creating userdata

  {!! Form::open(['url' => 'backoffice/portaluser/store', 'class' => 'form-horizontal']) !!}
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <fieldset>        
                        <div class="col-sm-8">

                                    <div class="form-group {{ $errors->has('name') ? 'has-error' : ''}}">
                                        {!! Form::label('name', 'Name:', ['class' => 'col-lg-2 control-label']) !!}
                                        <div class="col-lg-10">
                                            {!! Form::text('name', $value = null, ['class' => 'form-control', 'placeholder' => 'Name']) !!}
                                            {!! $errors->first('name', '<p class="help-block">:message</p>') !!}
                                        </div>
                                    </div>

                                    <div class="form-group {{ $errors->has('email') ? 'has-error' : ''}}">
                                        {!! Form::label('email', 'Email:', ['class' => 'col-lg-2 control-label']) !!}
                                        <div class="col-lg-10">
                                            {!! Form::email('email', $value = null, ['class' => 'form-control', 'placeholder' => 'Email', ]) !!}
                                            {!! $errors->first('email', '<p class="help-block">:message</p>') !!}
                                        </div>
                                    </div>
                                    <div class="form-group {{ $errors->has('password') ? 'has-error' : ''}}">
                                        {!! Form::label('password', 'Password:', ['class' => 'col-lg-2 control-label']) !!}
                                        <div class="col-lg-10">
                                            {!! Form::password('password',   ['class' => 'form-control', 'placeholder' => 'Password', 'type' => 'password', ]) !!}
                                            {!! $errors->first('password', '<p class="help-block">:message</p>') !!}
                                        </div>
                                    </div>

                                    <div class="form-group {{ $errors->has('userRoleId') ? 'has-error' : ''}}">
                                        {!! Form::label('userRoleId', 'Select Userrole', ['class' => 'col-lg-2 control-label'] )  !!}
                                        <div class="col-lg-10">
                                            {!!  Form::select('userRoleId',  $userRoleData, '', ['class' => 'form-control' ]) !!}
                                            {!! $errors->first('userRoleId', '<p class="help-block">:message</p>') !!}
                                        </div>
                                    </div> 
                          <button type="submit" class="submitbtn btn btn-primary">Submit</button>
                        </div>

                    </fieldset> 
                    {!! Form::close()  !!} 

<!-- Scripts --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

<!-- Laravel Javascript Validation -->
<script type="text/javascript" src="{{ asset('/jsvalidation/js/jsvalidation.js')}}"></script> 
{!! $validator !!}

I edited my post. client side validation onFocusOut is not working — Rups, Mar 08 '18 at 09:44
@laravellevaral again I edited my code. Kindly review View file code and Controller code. — Rups, Mar 08 '18 at 10:45

score 1 · Accepted Answer · answered Mar 08 '18 at 10:06

I guess Your question is not connected with jsvalidation but the logic how the OnFocusOut working.

Test how the event works:

<!DOCTYPE html>
<html>
<body>

Enter your name: <input type="text" id="fname" onfocusout="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

The onfocusout event occurs when an element is about to lose focus.

Tip: The onfocusout event is similar to the onblur event. The main difference is that the onblur event does not bubble. Therefore, if you want to find out whether an element or its child loses focus, you should use the onfocusout event.

Tip: Although Firefox does not support the onfocusout event, you can find out whether a child of an element loses focus or not, by using a capturing listener for the onblur event (using the optional useCapture parameter of the addEventListener() method).

Tip: The onfocusout event is the opposite of the onfocusin event.

Be sure that you need onfocusout not onmouseleave event.

client validation in laravel 5.4

1 Answers1