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

问题是我在表单中将数据远程设置为true。转向以防止Rails自动使用AJAX提交表单。然后我就能像我想的那样手动处理它。

Answer 2

完整的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'
                    }
                 }
            }
        }
    });       
});

BootstrapValidator在AJAX表单上未验证

2 个答案: