Tengo este formulario donde recibo los datos en una variable $user que proviene del controlador, muestro los datos en el formulario y cuando el usuario acciona el botón de enviar se envian los datos mediante ajax.

Lo hago mediante AJAX porque dentro del proyecto laravel tengo una API , la llamada la hace correctamente y los datos se actualizan correctamente. 

Las dudas que tengo són las siguientes :

- En el diseño html pongo el tag <form> porque de esta forma los input me cojen las validaciones, ejemplo : el campo de email comprueba que haya una "@"
- El campo "active" que es de tipo checkbox recibe el valor 0/1 de $user pero no me modifica el aspecto (activado/desactivado)
- Al no usar el form como tal y controlar el evento click del botón, si hay errores en los campos anteriores el evento se "dispara" de todas formas, como puedo controlar esto?




        @extends('layout-user')
    
        @section('content')
    
        <h3 class="mt-3">@lang('users.editar_usuario')</h3>
    
    
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" name="email" value="{{$user->email}}">
        </div>
        <div class="form-group">
            <label for="pwd">Documento de identidad:</label>
            <input type="document_type" class="form-control" name="document_type" id="document_type" value="{{$user->document_type}}">
        </div>
        <div class="checkbox">
            <label><input type="checkbox" name="active" value="{{$user->active}}">Activo</label>
        </div>
        <button type="submit" id="btn-save-user" class="btn btn-info">Guardar</button>
    
    
        <input type="hidden" name="user_id" value="{{ $user->id }}">
        <input type="hidden" name="_method" value="PUT">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
    
    
         @endsection
    
         @section('script')
        <script>
            $("#btn-save-user").click(function() {
    
                var email =  $('#email').val();
                var document_type =  $('#document_type').val();
                var active =  $('#active').val();
                var user_id = {{ $user->id }}
    
                $.ajax({
                    url : '/api/users/' + user_id ,
                    data : { user_id : user_id, document_type : document_type, email : email, active: active },
                    type : 'PUT',
                    dataType : 'json',
                    success : function(json) {
                        console.log('success');
                    },
                    error : function(json , xhr, status) {
                        console.log('error');
                    },
                    complete : function(json , xhr, status) {
    
                    }
                });
    
            });
        </script>
    
        @endsection