【发布时间】：2015-10-15 11:11:01
【问题描述】：
原始问题：
我的表单正确地通过了验证，但在不应该的时候提交。
关注http://formvalidation.io/examples/ajax-submit/
查看我的控制台，我没有看到.on“错误”部分中的任何日志语句或打印出的“成功”。该页面只是发布给自己。使用 url 中的数据。我不知道我在这里缺少什么，因为它基本上跳过了所有 .on 语句。
这是怎么回事？
请记住，验证仅适用于 .on 语句。
HTML：
<form id="service_path_form" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Service Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" name="service_path_name" placeholder="Name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">IP</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="service_path_ip" placeholder="IP" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-8">
<textarea class="form-control" name="service_path_description" rows="3" placeholder="Write a short Description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Enable</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="1" /> Enabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="service_path_enabled" value="0" /> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-4">
<button type="submit" class="btn btn-primary" name="validate" value="Validate and Submit">Validate and Submit</button>
</div>
</div>
<input type="hidden" name="created_by" value="{{request.user}}">
<input type="hidden" name="date_created" id = "date_created" value="">
JS：
<script>
$(document).ready(function() {
$('#service_path_form')
.bootstrapValidator({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
service_path_name: {
// The messages for this field are shown as usual
validators: {
notEmpty: {
message: 'The Service Path Name is required'
},
}
},
service_path_ip: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'The destination ip address is required'
},
ip: {
message: 'The ip address is not valid'
}
}
},
service_path_enabled: {
// Show the message in a tooltip
err: 'tooltip',
validators: {
notEmpty: {
message: 'Do you want this service path to be actively monitored?'
}
}
}
}
})
.on('err.form.fv', function(e) {
e.preventDefault();
console.log(e)
console.log('test')
})
.on('success.form.fv', function(e) {
// Prevent form submission
console.log("MADE IT HERE")
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
// Use Ajax to submit form data
console.log("MADE IT HERE")
$.ajax({
url: "/servicepathapi/v1/servicepaths/",
type: 'POST',
data: $form.serialize(),
success: function(result) {
console.log(result)
}
});
})
});
</script>
当前：
更新建议升级：
我尝试了@Arkni 的建议，但我觉得它的方向是正确的，我现在得到了这个：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'app/scripts/js/bootstrap/bootstrap.min.js' %}" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="{% static 'form_validation/js/formValidation.js' %}" ></script>
<script src="{% static 'form_validation/js/framework/bootstrap.min.js' %}" ></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('#service_path_form')
.formValidation({
framework: 'bootstrap',
icon: {
有了这个输出：
修复： 在检查我所有的源文件时，我注意到我实际上正在加载 jquery 2.0.2 和 2.1.3，删除 2.0.2 解决了这个问题。
【问题讨论】：
标签： javascript jquery html ajax validation