0

estoy realizando una aplicación con CodeIgniter donde el usuario registra sus datos y hay un canva para que haga su firma. Lo que me piden es así como se validan los inputs que también se valide el canva, si el usuario no ha puesto nada que salga "la firma es necesaria" o algo así. Agradezco vuestra ayuda.

Vista donde se carga el canva, estoy usando el plugin signature_pad.min:

  <div class="form-group prueba" >
  
 <canvas id="signature" name="signature" width="355"  height="150" style="border: 1px solid #ddd;" class="sig-canvas" aria-required="true"></canvas><br>
 <a class="btn btn-primary " id="clear-signature">Limpiar Firma</a>
 
 </div>
 
 Js del canva :
 
     jQuery(document).ready(function($){

        var canvas = document.getElementById("signature");
        var signaturePad = new SignaturePad(canvas);

        $('#clear-signature').on('click', function(){
            signaturePad.clear();
        });
        //Funcion donde guardara en un input type hidden el codigo base64 que generará el propio canva
        function getSignaturePad() {
            var imageData = signaturePad.toDataURL();
            document.getElementById("datos-img").setAttribute("value", imageData);
        }
        //Al momento que se envie el formulario que se guarde en la carpeta del servidor la imagen generada en el canva
        $('#form-registry-cliente').submit(function() {
            getSignaturePad(); //Carga la funcion donde se genera la funcion donde se guarda la imagen
            return true;
        });
    });

Controller:

Aqui guardo la firma en el servidor : 

$img = $this->input->post('datos-img');
            $img = str_replace('data:image/png;base64,', '', $img);
            $img = str_replace(' ', '+', $img);
            $img_data = base64_decode($img);
            $ruta= $this->parametros_model->get_parametros('ruta_firmas');
            $file = $ruta. $firma;
            $success = file_put_contents($file, $img_data);
            $image=str_replace('./','',$file);

Es todo lo que tengo del canvas.

1 respuesta 1

0

Saludos lo puedes realizar validando con JavaScript:

Poniendo el caso de que tengo un botón para grabar mis Datos:

<button type="button" class="button save" data-action="save-png">
  Guardar Firma
</button>
var botonGrabar = wrapper.querySelector("[data-action=save-png]");
botonGrabar.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Realize su firma.");
    return false;
  } else {
    //url firma
    var dataURL = signaturePad.toDataURL();
    //bajar firma
    download(dataURL, "signature.png");
  }
});

Dentro del repositorio de dicha libreria puedes consultar ejemplos de como usarlo y validar espero te sirva y te dejo el link: Link SignaturePad

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.