引导验证（成功）后，表单使用默认方法而不是 ajax 提交。 e.preventDefault() 不起作用？

Posted 2023-05-08

【中文标题】引导验证（成功）后，表单使用默认方法而不是 ajax 提交。 e.preventDefault() 不起作用？

【英文标题】：After bootstrap validation (successful), form submits using default method and not ajax. e.preventDefault() is not working?

【发布时间】：2021-01-03 21:16:57

【问题描述】：

这一直困扰着我，任何帮助将不胜感激。我有一个正确验证的表单，但在提交时它不使用 AJAX ，而是使用默认表单方法提交。 preventDefault() 不起作用。我什至尝试过 e.stopImmediatePropagation()，但也没有用。这看起来像一个简单的问题，但我是 javascript 的新手，我不确定我在这里做错了什么。 我正在使用以下

3.2.0 jQuery 4.5.2 js/bootstrap 0.4.5 bootstrapvalidator.min.js

这是我的代码：

$(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】：

所以我解决了这个问题，以防其他人有同样的问题。我不知道为什么这行得通，而不是上面的那个（我是新手），也许有人可以详细说明为什么这行得通或者是一种更好的方法。无论如何，对我有用的代码是

  $('#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'
                
                
            
        

   ); 


 );