BootstrapValidator 不在 AJAX 表单上验证

Question

我目前创建了一个 AJAX 联系表单，我在我的网站上使用它并使用 BootstrapValidator 来验证字段。我在代码中有 e.PreventDefault() 行；但是，当我按下提交时，即使验证失败，表单也会提交（尽管错误消息会出现在表单上）。尽管遵循http://bootstrapvalidator.com/examples/ajax-submit/ 的示例，但我无法弄清楚如何阻止提交进行验证。有人有什么想法吗？

JSFiddle：http://jsfiddle.net/5dpm655v/1/

HTML

<form accept-charset="UTF-8" action="/echo/json/" data-remote="true" id="contact_form" method="post">
<label for="name">Name</label>
<div class="row margin-bottom-20">
    <div class="col-md-7 col-md-offset-0">
        <input class="form-control" id="name" name="name" type="text" />
    </div>
</div>
<label for="email">Email</label>
<div class="row margin-bottom-20">
    <div class="col-md-7 col-md-offset-0">
        <input class="form-control" id="email" name="email" type="text" />
    </div>
</div>
<label for="message">Message</label>
<div class="row margin-bottom-20">
    <div class="col-md-11 col-md-offset-0">
        <textarea class="form-control" id="message" name="message" rows="8"></textarea>
    </div>
</div>
<p>
    <button type="submit" class="btn-u">Send Message</button> 
    <span id="contact-form-success" style="display:none;">Message successfully sent.  We'll be in touch shortly!</span>
    <span id="contact-form-error" style="display:none;">Error: I'm sorry, we weren't able to successfully send your message.  Please try again.</span>
</p>
</form>

jQuery

    jQuery(document).ready(function() {
        $('form#contact_form')
        .bootstrapValidator({
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'Name is required and cannot be empty'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'Email is required and cannot be empty'
                        },
                        emailAddress: {
                            message: 'This is not a valid email address'
                        }
                    }
                },
                message: {
                    validators: {
                        notEmpty: {
                            message: 'Message is required and cannot be empty'
                        }
                    }
                }
            }
        })
        .on('success.form.bv', function(e) {
          e.preventDefault();
          var valuesToSubmit = $(this).serialize();
          $.ajax({
            url: $(this).attr('action'),
            data: valuesToSubmit,
            dataType: 'json',
            type: 'POST',
            success: function(data) {
                $('input#name').val('');
                $('input#email').val('');
                $('textarea#message').val('');
                $('#contact-form-success').show().fadeOut(10000);
            },
            error: function(data) {
                $('#contact-form-error').show().fadeOut(10000);
            }
         });
      });
  });

Answer 1

完整的jquery代码在这里

来自提交者的 ajax post 函数将是内部 bootstrapvalidator 函数。

$(document).ready(function() {
    $('#contact_form').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'
        },
        submitHandler: function(validator, form, submitButton) {
          $.ajax({
            type: "POST",
            url: "send_data.php", //change your php file name here
            data: $('#contact_form').serialize(),
            success: function(msg){
              console.log(msg);
              $('#success_message').slideDown({ opacity: "show" }, "slow");
              //$('#contact_form')[0].reset();
              alert("success");
            },
            error: function(){
              alert("Update your ajax form submit url");
            }
          });
        },
        excluded: ':disabled',
        fields: {
            first_name: {
                validators: {
                        stringLength: {
                        min: 2,
                    },
                        notEmpty: {
                        message: 'Please supply your first name'
                    }
                }
            },
             last_name: {
                validators: {
                     stringLength: {
                        min: 2,
                    },
                    notEmpty: {
                        message: 'Please supply your last name'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your email address'
                    },
                    emailAddress: {
                        message: 'Please supply a valid email address'
                    }
                }
            },
            phone: {
                validators: {
                    notEmpty: {
                        message: 'Please supply your phone number'
                    },
                    phone: {
                        country: 'US',
                        message: 'Please supply a vaild phone number with area code'
                    }
                }
            },
            address: {
                validators: {
                     stringLength: {
                        min: 8,
                    },
                    notEmpty: {
                        message: 'Please supply your street address'
                    }
                }
            },
            city: {
                validators: {
                     stringLength: {
                        min: 4,
                    },
                    notEmpty: {
                        message: 'Please supply your city'
                    }
                }
            },
            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'
                    }
                }
            },
            comment: {
                validators: {
                      stringLength: {
                        min: 10,
                        max: 200,
                        message:'Please enter at least 10 characters and no more than 200'
                    },
                    notEmpty: {
                        message: 'Please supply a description of your project'
                    }
                 }
            }
        }
    });       
});

Answer 2

问题是我在表单中将 data-remote 设置为 true。转向阻止 Rails 自动使用 AJAX 提交表单。然后我就可以按照自己的意愿手动处理它了。