【问题标题】:$(…) formValidation is not a function on document ready$(...) formValidation 不是文档准备好的函数
【发布时间】:2016-07-24 08:05:27
【问题描述】:

我收到错误 Uncaught TypeError:$(..) form Validation is not a function 该错误来自下面 JS 代码中的一行。我该如何解决?我应该改变什么???请分享您的知识...

<!-- js placed at the end of the document so the pages load faster -->  

<script src="assets/js/jquery.js"></script>

<!-- validation plugin jquery -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>
<!--common script for all pages-->
<script src="assets/js/common-scripts.js"></script>
<!--script for this page-->
<!-- Include Date Range Picker -->
<!-- https://formden.com/blog/date-picker  -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<!-- Time Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<script src="//oss.maxcdn.com/bootbox/4.2.0/bootbox.min.js"></script>
<!-- addmoreact.js -->
<script src="assets/js/addmoreact.js"></script>

<script src="assets/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        $('#userForm').formValidation();
        $('#userForm').on( 'success.form.fv', function(e) {
            // You can inform the user that the data is updated successfully
            // by highlighting the row or showing a message box bootbox
            .alert('The Petitioner Details is updated');
        });
        $('#petView .editButton') .on('click', function() {
            // Get the record's ID via attribute
            var cino = $(this).attr('data-id');
            var ptyno = $(this).attr('data-email');
            var ptytype = $(this).attr('data-age');
            /* alert("cino::" + cino + "ptyno::" + ptyno + "ptytype::" + ptytype); */
            $.ajax({
                url : "editpet.jsp?cino=" + cino + "&ptyno=" + ptyno + "&ptytype=" + ptytype,
                method : 'POST'
            }).success(function(response) {
                var res = jQuery.parseJSON(response);
                // Populate the form fields with the data returned from server 
                $('#userForm').find('[name="advocateName"]').val(res.advname)
                .end()
                .find('[name="age"]')
                .val(res.age)
                .end()
                .find('[name="barregistrationnumber"]')
                .val(res.barreg)
                .end()
                .find('[name="mobile"]')
                .val(res.mobile)
                .end()
                .find('[name="name"]')
                .val(res.name)
                .end()
                .find('[name="relname"]')
                .val(res.relname)
                .end()
                .find('[name="email"]')
                .val(res.email)
                .end()
                .find('[name="ptyno"]')
                .val(res.ptyno)
                .end()
                .find('[name="type"]')
                .val(res.ptyType)
                .end()
                .find('[name="cino"]')
                .val(res.cino)
                .end()
                .find('[name="passport"]')
                .val(res.passport)
                .end()
                .find('[name="pan"]')
                .val(res.pan)
                .end()
                .find('[name="fax"]')
                .val(res.fax)
                .end()
                .find('[name="occupation"]')
                .val(res.occupation)
                .end()
                .find('[name="country"]')
                .val(res.country)
                .end()
                .find('[name="nationality"]')
                .val(res.nationality)
                .end()
                .find('[name="phone"]')
                .val(res.phone)
                .end()
                .find('[name="alternateaddress"]')
                .val(res.alternateaddress)
                .end();

                // Show the dialog bootbox
                .dialog({
                    title : 'Edit Petitioner Details',
                    message : $('#userForm'),
                    show : false,
                    onEscape:true
                    // We will show it manually later
                    /* http://stackoverflow.com/questions/29708075/how-to-confirm-a-form-submission-with-bootbox-using-jquery-ajax-and-json?rq=1 */
                }).on('shown.bs.modal', function() {
                     $('#userForm').show()
                     // Show the login form
                     .formValidation( 'resetForm'); // Reset form
                }).on('hide.bs.modal', function(e) {
                     // Bootbox will remove the modal (including the body which contains the login form)
                     // after hiding the modal
                     // Therefor, we need to backup the form
                     $('#userForm').hide()
                     .appendTo('body');
                }).modal('show');

                /* if ($('#userForm #userformpetExtraInfo').is(':checked')) {
                       alert("Extra Pet Infor check");
                       $("#userForm #userformextrapet").show(); 
                   } else {
                       alert("Extra Pet Infor  un check");
                       $("#userForm #uuserformextrapet").hide();
                   }  */

            });//sucess
        });    
</script>

<!-- The form which is used to populate the item data -->                       
<form id="userForm" method="post" class="form-horizontal" action="updatePetitionerView.do" >
    <div class="form-group">
        <label class="col-xs-3 control-label">Advocate Name</label>
        <div class="col-xs-3">
            <input type="text" 
                   class="form-control" 
                   name="advocateName" disabled="disabled" 
                   data-toggle="tooltip" 
                   data-placement="top" 
                   id="advocateName" 
                   title="Enter Advocate Name" 
                   data-fv-notempty="true" 
                   data-fv-notempty-message="The username is required"
                   data-fv-stringlength="true" 
                   data-fv-stringlength-min="6"
                   data-fv-stringlength-max="30"
                   data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
                   data-fv-regexp="true"
                   data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                   data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
        </div>
    </div>
</form>

【问题讨论】:

    标签: jquery html twitter-bootstrap-3


    【解决方案1】:

    更新答案:

    您在下面说过,您实际上并没有尝试使用http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js(这引出了您为什么包含它的问题),而是您尝试使用http://formvalidation.io/download/。但是您也说过您找不到要包含在第二个插件中的脚本。

    插件不能只是神奇地将自身添加到您的页面中。这是一个付费插件。如果你有一个有效的试用许可证,他们会告诉你在哪里下载你应该使用的脚本。如果您没有为该插件添加任何脚本,则该插件将无法在您的网站上运行。


    根据问题中包含的内容得出的原始答案:

    字符串“formvalidation”没有出现在http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js 的任何地方。这显然不是你使用它的方式。

    the documentation 的最简短的一瞥表明您想要.validate(),而不是.formValidation()

    【讨论】:

    • 我认为 jquery.validate.min.js 可能与 bootstrap.js 冲突我已删除 jquery.validate.min.js 脚本。我正在尝试验证表单 请参考formvalidation.io/download in声明标签
    • @AjayTakur:这是 Bootstrap 的 附加组件,而不是 Bootstrap 本身的一部分。在您加载它的示例中,我没有看到任何脚本标签。
    • 我没有找到任何插件的脚本标签。我尝试过试用它不起作用
    • @AjayTakur:插件不能神奇地将自身添加到您的页面中。这是一个付费插件。如果你有一个有效的试用许可证,很好,但他们会告诉你在哪里下载你应该使用的脚本。如果您没有为该插件添加任何脚本,则该插件将无法在您的网站上运行。
    猜你喜欢
    • 2011-12-29
    • 1970-01-01
    • 2015-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-13
    • 1970-01-01
    相关资源
    最近更新 更多