Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: gAb1 en 17 Junio 2016, 21:44 pm



Título: evento on submit preventDefault no funciona
Publicado por: gAb1 en 17 Junio 2016, 21:44 pm
Estoy usando un plugin jquery llamado formly para verificar los campos antes de mandarlos. El problema es que el evento on submit (dentro del plugin) no detiene el submit y el formulario se sigue enviando de todas formas...

Código
  1. (function($) {
  2.  
  3. $.fn.formly = function(callback) {
  4.  
  5.    // Submit button
  6.    this.on('submit', function(e) {
  7.  
  8.        // NOT WORKING AT ALL...
  9.        e.preventDefault();
  10.        var canSubmit = true;
  11.  
  12.        $(this).find('input').each(function() {
  13.  
  14.            // Required
  15.            if ($(this).attr('required')) {
  16.                canSubmit = functions.required(this);
  17.            }
  18.  
  19.            // Validate
  20.            if ($(this).attr('validate')) {
  21.                canSubmit = functions.validate(this);
  22.            }
  23.  
  24.            // Match
  25.            if ($(this).attr('match')) {
  26.                canSubmit = functions.match(this);
  27.            }
  28.  
  29.        });
  30.  
  31.        if (canSubmit) {
  32.            if (callback) {
  33.  
  34.                var clientInfo = $(this).serializeArray();
  35.  
  36.                /* Password hash function */
  37.                var p = $('#reg_pwd').val(),
  38.                    c = $('#confirm_pwd').val(),
  39.                    shaObj = new jsSHA('SHA-512', 'TEXT');
  40.  
  41.                shaObj.update(p);
  42.                var p_hash = shaObj.getHash("HEX"),
  43.                    shaObj = new jsSHA('SHA-512', 'TEXT');
  44.  
  45.                shaObj.update(c);
  46.                var c_hash = shaObj.getHash("HEX");
  47.  
  48.                callback(clientInfo, p_hash, c_hash);
  49.            }
  50.        }
  51.  
  52.    });

En mi archivo scripts.js llamo al plugin y pongo el callback que es el que debería enviar el formulario (dropzone se tiene que encargar de esto, junto a la imagen):

Código
  1.        $('#register').formly(function(clientInfo, p_hash, c_hash) {
  2.  
  3.            Dropzone.autoDiscover = false;
  4.            $('#myDropzone').dropzone({
  5.                init: function() {
  6.                    var myDropzone = this
  7.  
  8.                    myDropzone.processQueue();
  9.  
  10.                    myDropzone.on('sending', function(data, xhr, formData) {
  11.                        formData.append('client_info', clientInfo);
  12.                        formData.append('reg_pwd', p_hash),
  13.                        formData.append('confirm_pwd', c_hash);
  14.                        console.log('I just sended the info...');
  15.                    });
  16.  
  17.                    myDropzone.on('success', function(file, response) {
  18.                        myDropzone.removeFile(file);
  19.                        response == '' ? window.location.replace('//admin.inmopaco.tk/') : alert('success_' + response);
  20.                    });
  21.                }
  22.            });
  23.  
  24.        });

Para poco, dropzone me da error diciendo que ya esta inicializado... y no se sube nada. Dropzone lo tengo que inicializar fuera de formly y luego dentro tengo que procesar el queue y enviar el formulario. ¿Como prodría hacer esto sin reinicializar dropzone para que no de error?

¿Y para evitar que el formulario se envie al darle al boton? Tiene que ser dropzone el que envie el array y los hashes.

Gracias!


Título: Re: evento on submit preventDefault no funciona
Publicado por: engel lex en 17 Junio 2016, 23:33 pm
la forma mas facil de prevenir el submit es retornar false al final del callback


Título: Re: evento on submit preventDefault no funciona
Publicado por: gAb1 en 18 Junio 2016, 00:31 am
Sigue sin funcionar... y es muy raro, tengo otros scripts en el mismo archivo con un evento click y haciendo preventDefault y si que funcionan. Pero este caso es ligeramente distinto.

De todas maneras, la finalidad del script es evitar el submit (siempre en todo momento ya que se envia por ajax) y comprobar que los campos pasen los controles. Si se ejecuta el callback es porque todo está bien, pero veo mensajes (del plugin) cuando se ejecuta el submit (de los select)...

Esto quiere decir que el formulario no se envia porque html5 required lo cancela (o no lo deja iniciar), y no porque el on submit lo detenga... Entonces en cuanto los required se rellenan el submit se ejecuta, pero no debería!

¿Alguna idea de porqué ocurre esto?


Edito: He probado poniendo return false en el callback y en el on submit. No consigo hacer que no se envie el submit... debe haber algo en alguna parte...  :-\

Edito 2: Que le den al submit, uso un elemento <a> y dejo de complicarme ya la vida  :laugh: