Javascript .formValidation 不是函数

.formValidation is not a function

提问by BilliAm

Original Issue:

原始问题：

My form is hitting the validation correctly but submitting when it shouldn't be.

我的表单正确地进行了验证，但在不应该提交时提交。

Following http://formvalidation.io/examples/ajax-submit/

遵循http://formvalidation.io/examples/ajax-submit/

Viewing my console I don't see any of the log statements in the .on"error" section or the "success" printed out. And the page just posts to itself. With the data in the url. I don't know what I'm missing here as basically it skips all .onstatements.

查看我的控制台，我没有看到.on“错误”部分中的任何日志语句或打印出的“成功”。该页面只是发布给自己。使用 url 中的数据。我不知道我在这里缺少什么，因为它基本上跳过了所有.on语句。

What is going on here?

这里发生了什么？

Remember Validation works just non of the .onstatements.

请记住，验证仅适用于非.on语句。

HTML:

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:

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>

CURRENT:

当前的：

Update with suggested upgrade:

使用建议的升级进行更新：

I tried @Arkni 's suggestion, while I feel like it's in the right direction with I'm now getting this:

我尝试了@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: {

With this output:

有了这个输出：

FIX:While checking all of my source files I noticed that I was actually loading jquery 2.0.2 and 2.1.3, removing 2.0.2 fixed the issue.

修复：在检查我的所有源文件时，我注意到我实际上正在加载 jquery 2.0.2 和 2.1.3，删除 2.0.2 解决了这个问题。

采纳答案by Phuoc Nguyen

Since you're using FormValidation, you should try to remove jquery.validate.min.js as I am afraid of the confliction.

由于您使用的是 FormValidation，您应该尝试删除 jquery.validate.min.js 因为我害怕冲突。

This jsfiddleworks properly:

这个jsfiddle工作正常：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/vendor/formvalidation/css/formValidation.min.css">

<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>
</form>

The scripts:

脚本：

<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/js/framework/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('#service_path_form')
  .formValidation({
    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?'
                }
            }
        }
    }
  });
});
</script>

Here is the result showing how it looks like:

这是显示它的样子的结果：

I hope it helps you.

我希望它能帮助你。

回答by Arkni

As you said in your question, you are using FormValidationnot BootstrapValidator.

正如您在问题中所说，您使用的是FormValidation而不是BootstrapValidator。

So to solve your problem, replace this

所以为了解决你的问题，更换这个

$(document).ready(function() {
    $('#service_path_form')
        .bootstrapValidator({ // <====

with

和

$(document).ready(function() {
    $('#service_path_form')
        .formValidation({ // <====

---

---

Some notes:

一些注意事项：

• FormValidationis the new name of BootstrapValidatorfrom version 0.6.0.
• BootstrapValidator is deprecated and not supported anymore.
• See this guideto upgrade from BootstrapValidator to Formvalidation.

• FormValidation是BootstrapValidator的新名称，从 0.6.0 版开始。
• BootstrapValidator 已弃用，不再受支持。
• 请参阅本指南以从 BootstrapValidator 升级到 Formvalidation。