JS Validate plugin prevent submit form

Question

Hello this is my code i am trying to prevent form submit when button is clicked, and load ajax. but form continue to submits, I tried to add preventDefault, and onsubmit false parametar but no luck. Is there anyone to help me to fix this problem

    $(function() {
      $('#submitTest').click(function(e){
        var form_test = $('#test_forma').serialize();
        e.preventDefault;

        jQuery.extend(jQuery.validator.messages, {
          required: "Odgovor je obavezan",
        });

        $( "#test_forma" ).validate({
          onsubmit: false,
          submitHandler: function(form) {
            form.preventDefault();
            // e.preventDefault();
            if(('#test_forma').valid()) {
              $.ajax({
                type: "POST",
                url: " <?php echo base_url().'home/test';?> ",
                data: {form_test:form_test},

                beforeSend: function() {
                  // setting a timeout
                  $('#g_upozorenje').html('<img src="<?php echo base_url().'images/loading.gif';?>"/>');
                },

                success: function(response) {
                  $.each(response.answers, function(i, item){
                    // if(('#test_odgovori_' + i).val()) == response[i].IdPitanja)
                    if(response.answers[i].provera ==1) {
                      $('#test_odgovori_'+response.answers[i].Id).css('color','green');
                    } else {
                      $('#test_odgovori_'+response.answers[i].Id ).css('color','green');
                      $('.test_odgovori_'+response.answers[i].IdPitanja+':checked').next().css('color','red');
                    }
                    $('#procenat').html('Odgovorili ste tačno na '+response.result + '% pitanja')
                    $('#rezultati').dialog();
                  });
                }
              });
            }
          }
        });
      });
    });

Is `#submitTest` the form or the submit button? – evolutionxbox Aug 11 '15 at 14:46 — evolutionxbox, Aug 11 '15 at 14:46
http://jsfiddle.net/arunpjohny/5sof2mgd/1/ ? – Arun P Johny Aug 11 '15 at 14:50 — Arun P Johny, Aug 11 '15 at 14:50

score 2 · Accepted Answer · answered Aug 11 '15 at 14:47

2

You need to use preventDefault as a method and D is uppercase

e.preventDefault();

http://api.jquery.com/event.preventdefault/

answered Aug 11 '15 at 14:47

Carlos487

1,459
13
17

score 1 · Answer 2 · edited May 23 '17 at 11:44

1

You've got to return false;.

Take a look at this example:

<form onsubmit="javascript:doSomething();return false;">
    <input type="submit" value="click me">
</form>

Or look here.

edited May 23 '17 at 11:44

Community

1
1

answered Aug 11 '15 at 14:47

m02ph3u5

3,022
7
38
51

score 1 · Answer 3 · answered Aug 11 '15 at 14:47

e.preventDefault(); is written correctly with brackets, and I think they should be the first after the opening brackets. And try to fire the preventDefault on the form submit and not the click on the button. There are several possibilities to submit a form without pressing the button, you wouldn't handle now.

score 1 · Answer 4 · answered Aug 11 '15 at 14:47

You need to stop the form from submitting, not preventing default action of the button.

Instead target the form's submit event:

  $("form").submit(function (e) {
        e.preventDefault(); // this will prevent from submitting the form.
        ...

Or even use jQuery's on event handler for better performance:

  $("form").on('submit', function (e) {
        e.preventDefault(); // this will prevent from submitting the form.
        ...

JS Validate plugin prevent submit form

4 Answers4