After bootstrap validation (successful), form submits using default method and not ajax. e.preventDefault() is not working?

101 views Asked by At

This is has been really plaguing me and any help would be greatly appreciated. I have a form that validates correctly but on submit it doesnt use AJAX , instead submits using default form method. The preventDefault() is not working. I even tried e.stopImmediatePropagation(), that did not work either. It looks like a simple problem, but I am a newbie to Javascript and i am not sure what i am doing wrong here. I am using the following

  • 3.2.0 jquery
  • 4.5.2 js/bootstrap
  • 0.4.5 bootstrapvalidator.min.js

Here is my Code:

$(document).ready(function() {

$('#202496819078063').bootstrapValidator({
    // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        'q14_yourName[first]': {
            validators: {
                    stringLength: {
                    min: 2,
                },
                    notEmpty: {
                    message: 'Please supply your first name'
                }
            }
        },
         'q14_yourName[last]': {
            validators: {
                 stringLength: {
                    min: 2,
                },
                notEmpty: {
                    message: 'Please supply your last name'
                }
            }
        },
        input_17: {
            validators: {
                 stringLength: {
                    min: 2,
                },
                notEmpty: {
                    message: 'Please supply your Business name'
                }
            }
        },
        
        q15_yourEmail: {
            validators: {
                notEmpty: {
                    message: 'Please supply your email address'
                },
                emailAddress: {
                    message: 'Please supply a valid email address'
                }
            }
        },
        q29_phone: {
            validators: {
                
                phone: {
                    country: 'CA',
                    message: 'Please supply a vaild phone number with area code'
                }
            }
        },
        q18_whatIs: {
            validators: {
                 
                 uri: {
                    message: 'Please enter a valid URL including http://'
                },
                notEmpty: {
                    message: 'What is your business website?'
                }
            }
        },
        
        state: {
            validators: {
                notEmpty: {
                    message: 'Please select your state'
                }
            }
        },
        zip: {
            validators: {
                notEmpty: {
                    message: 'Please supply your zip code'
                },
                zipCode: {
                    country: 'US',
                    message: 'Please supply a vaild zip code'
                }
            }
        },
        q20_pleaseTell20: {
            validators: {
                  stringLength: {
                    min: 10,
                    max: 200,
                    message:'Please enter at least 10 characters and no more than 200'
                },
                notEmpty: {
                    message: 'Please tells us a bit about your business'
                }
                }
            }
        }
    })
    .on('success.form.bv', function(e) {

        $('#success_message').slideDown({ opacity: "show" }, "slow") // Do something ...
           // $('#202496819078063').data('bootstrapValidator').resetForm();

        // Prevent form submission
        e.preventDefault();
        

        // Get the form instance
        var $form = $(e.target);

        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');
        var url = $form.attr('action');
        //alert (url);
        // Use Ajax to submit form data
        $.post($form.attr('action'), $form.serialize(), function(result) {
            console.log(result);
        }, 'json');



    });

});

1

There are 1 answers

0
Randeep Singh On

So i Solved this in case someone else has the same issue. I am not sure why this works and not the one above ( I am a newbie), maybe someone can elaborate why this works or is a better approach. Anyhow the code that worked for me is

  $('#myform').bootstrapValidator({
  message: 'This value is not valid',
  submitButton: '$user_fact_form button[type="submit"]',
  submitHandler: function(validator, form, submitButton) {
 var purl = $(form).attr("action");
  var method = $(this).attr("method"); 
  $.ajax({
      type: method,
      url: purl,
      data: $(form).serialize(),
      success: function(result) {
          alert('done');
          $("#myform").data('bootstrapValidator').resetForm();
      }
   });
   return false;
   },
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
     },
     fields: {
        
        q29_phone: {
            validators: {
                
                phone: {
                    country: 'CA',
                    message: 'Please supply a vaild phone number with area code'
                }
            }
        },
        q18_whatIs: {
            validators: {
                 
                 uri: {
                    message: 'Please enter a valid URL including http://'
                },
                notEmpty: {
                    message: 'What is your business website?'
                }
            }
        },
        
        state: {
            validators: {
                notEmpty: {
                    message: 'Please select your state'
                }
            }
        },
        zip: {
            validators: {
                notEmpty: {
                    message: 'Please supply your zip code'
                },
                zipCode: {
                    country: 'US',
                    message: 'Please supply a vaild zip code'
                }
            }
        },
        q20_pleaseTell20: {
            validators: {
                  stringLength: {
                    min: 10,
                    max: 200,
                    message:'Please enter at least 10 characters and no more than 200'
                },
                notEmpty: {
                    message: 'Please tells us a bit about your business'
                }
                }
            }
        }

   }); 


 });