简体   繁体   中英

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

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');



    });

});

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'
                }
                }
            }
        }

   }); 


 }); 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM