jQuery validate submitHandler does not work on firefox

Asked

Viewed 3,046 times

8

With the following function below, I can send the data via ajax quietly in Chrome, but when testing in Firefox, no error occurs and the data is not sent.

$('#form_lista_amiga').validate({
    rules : {
        cpf: { required: true, cpf: true }
    },
    submitHandler: function(form) {

        var data = $( form ).serialize();
        event.preventDefault();
        $.ajax({
            url: "<?php echo Router::url(array('controller' => 'ListaAmiga', 'action' =>'add'), true); ?>",
            type: 'POST',
            datatype: 'json',
            data: data,
            success: function(data){
                $('#lista_amiga_msg').html(data);
                // alert(data);
            }
        });  
        return false;   
    }
});
jquery ajax

  • What error happens when you try to send in Firefox? Could you please tell us?

  • Can you create an example in jsFiddle that has the problem you refer to? (or maybe @Paulohdsousa?)

2 answers

2


I poked around here with your code and I came to the conclusion that the event.preventDefault() causes a malfunction between Firefox and Chrome.

If the code contains a event.preventDefault() so it works on Chrome, but Firefox doesn’t work... instead it seems to submit the form normally.

When commenting on the line event.preventDefault(), ai Firefox started to behave in the same way as Chrome.

That was the code I tested and worked on both browsers:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/libs/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="/libs/jquery.validate-1.13.1.js"></script>
    <link href="/libs/bootstrap-3.2.0.min.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript">
        $(function() {

            jQuery.validator.addMethod("cpf", function(value, element) {
                return (/\d{3}.\d{3}.\d{3}-\d{2}/g).test(value);
            }, "* CPF inválido");

            $('#form_lista_amiga').validate({
                rules : {
                    cpf: { required: true, cpf: true }
                },
                submitHandler: function(form) {

                    var data = $( form ).serialize();
                    //event.preventDefault();
                    $.ajax({
                        url: "add",
                        type: 'POST',
                        datatype: 'json',
                        data: data,
                        success: function(data){
                            alert(data);
                        }
                    });  
                    return false;

                }
            });

        });
    </script>
</head>
<body>
    <form id="form_lista_amiga">
        <input id="cpf" name="cpf" />
        <input type="submit" value="send" />
    </form>
</body>
</html>

  • @Marcelo de Andrade worked ?

  • Exactly, Miguel. I checked that Event.preventDefault() does not work properly in Firefox because the Event variable was not initialized. Here is the tip: http://stackoverflow.com/questions/4585970/jquery-event-preventdefault-not-working-in-firefox-jsfiddle-included

  • To tell the truth, I discovered the problem doing binary search (almost binary)... nor had I attacked the fact that the event not be initialized.

  • I did some research on this, it seems that event defined in window is invention of Microsoft and its blessed IE. Chrome, probably to have greater compatibility, defines this variable in the window, but Firefox does not.

0

if you want to use the event, use this pattern:

$("#form").submit(function(e) {
    e.preventDefault();
}).validate({
    rules: {...},
    submitHandler: function(form) { 
        //codigo
        return false;
    }
});

Browser other questions tagged jquery ajax

You are not signed in. Login or sign up in order to post.