Original Issue:

My form is hitting the validation correctly but submitting when it shouldn't be.

Following http://formvalidation.io/examples/ajax-submit/

Viewing my console I don't see any of the log statements in the .on error section or the success printed out. And the page just posts to itself. With the data in the url. I don't know what I'm missing here as basically it skips all .on statements.

What is going on here?

Remember Validation works just non of the .on statements.

HTML:

<form id=service_path_form class=form-horizontal>

<div class=form-group>

    <label class=col-xs-3 control-label>Service Name</label>

    <div class=col-xs-8>

        <input type=text class=form-control name=service_path_name placeholder=Name />

    </div>

</div>



<div class=form-group>

    <label class=col-xs-3 control-label>IP</label>

    <div class=col-xs-5>

        <input type=text class=form-control name=service_path_ip placeholder=IP />

    </div>

</div>



<div class=form-group>

    <label class=col-xs-3 control-label>Description</label>



    <div class=col-xs-8>

        <textarea class=form-control name=service_path_description rows=3 placeholder=Write a short Description></textarea>

    </div>

</div>



<div class=form-group>

    <label class=col-xs-3 control-label>Enable</label>

    <div class=col-xs-5>

        <div class=radio>

            <label>

                <input type=radio name=service_path_enabled value=1 /> Enabled

            </label>

        </div>

        <div class=radio>

            <label>

                <input type=radio name=service_path_enabled value=0 /> Disabled

            </label>

        </div>

    </div>

</div>



<div class=form-group>

    <div class=col-xs-9 col-xs-offset-4>

        <button type=submit class=btn btn-primary name=validate value=Validate and Submit>Validate and Submit</button>

    </div>

</div>

<input type=hidden name=created_by value={{request.user}}>

<input type=hidden name=date_created id = date_created value=>

JS:

<script>

$(document).ready(function() {

    $('#service_path_form')

      .bootstrapValidator({

        framework: 'bootstrap',

        icon: {

            valid: 'glyphicon glyphicon-ok',

            invalid: 'glyphicon glyphicon-remove',

            validating: 'glyphicon glyphicon-refresh'

        },

        fields: {

            service_path_name: {

                // The messages for this field are shown as usual

                validators: {

                    notEmpty: {

                        message: 'The Service Path Name is required'

                    },

                }

            },

            service_path_ip: {

                // Show the message in a tooltip

                err: 'tooltip',

                validators: {

                    notEmpty: {

                        message: 'The destination ip address is required'

                    },

                    ip: {

                        message: 'The ip address is not valid'

                    }

                }

            },

            service_path_enabled: {

                // Show the message in a tooltip

                err: 'tooltip',

                validators: {

                    notEmpty: {

                        message: 'Do you want this service path to be actively monitored?'

                    }

                }

            }

        }

    })

    .on('err.form.fv', function(e) {

      e.preventDefault();

      console.log(e)

      console.log('test')

    })

    .on('success.form.fv', function(e) {

      // Prevent form submission

      console.log(MADE IT HERE)

      e.preventDefault();



      var $form = $(e.target),

          fv    = $form.data('formValidation');



      // Use Ajax to submit form data

      console.log(MADE IT HERE)

      $.ajax({

          url: /servicepathapi/v1/servicepaths/,

          type: 'POST',

          data: $form.serialize(),

          success: function(result) {

              console.log(result)

          }

      });

  })

});

</script>

CURRENT:

Update with suggested upgrade:

I tried @Arkni 's suggestion, while I feel like it's in the right direction with I'm now getting this:

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js></script>

<script src={% static 'app/scripts/js/bootstrap/bootstrap.min.js' %} ></script>

<script src=http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js></script>

<script src={% static 'form_validation/js/formValidation.js' %} ></script>

<script src={% static 'form_validation/js/framework/bootstrap.min.js' %} ></script>

<script src=//code.jquery.com/ui/1.11.4/jquery-ui.js></script>





<script>

$(document).ready(function() {

    $('#service_path_form')

      .formValidation({

        framework: 'bootstrap',

        icon: {

With this output:

FIX:
While checking all of my source files I noticed that I was actually loading jquery 2.0.2 and 2.1.3, removing 2.0.2 fixed the issue.