Jquery formvalidation未捕获范围错误:最大调用堆栈大小超过

时间:2017-02-11 07:37:11

标签: jquery css ajax html5

我正在尝试使用Jquery表单验证。但是我得到了Uncaught范围错误:超出了最大调用堆栈。我正在使用materialize css。

  

这是我得到的错误

Uncaught RangeError: Maximum call stack size exceeded
at RegExp.[Symbol.replace] (native)
at String.replace (native)
at Sizzle (http://localhost:3001/bower_components/jquery/dist/jquery.js:869:26)
at Function.Sizzle.matches (http://localhost:3001/bower_components/jquery/dist/jquery.js:1405:9)
at Function.jQuery.filter (http://localhost:3001/bower_components/jquery/dist/jquery.js:2769:15)
at winnow (http://localhost:3001/bower_components/jquery/dist/jquery.js:2749:18)
at jQuery.fn.init.is (http://localhost:3001/bower_components/jquery/dist/jquery.js:2807:12)
at FormValidation.Framework.Bootstrap._getMessageContainer (http://localhost:3001/js/formValidation.min.js:10:13553)
at FormValidation.Framework.Bootstrap._getMessageContainer (http://localhost:3001/js/formValidation.min.js:10:13639)
at FormValidation.Framework.Bootstrap._getMessageContainer (http://localhost:3001/js/formValidation.min.js:10:13639)
  

这是我的jquery和html代码

 <form class="col s12 m8 l6" id="frontdesk-form-validation">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="first_name" name="name" type="text" class="validate">
                        <label for="first_name">Name</label>
                    </div>
                </div>
                提交             
        </form>
function saveEnquiry() {
                    $('#frontdesk-form-validation').formValidation({
                            framework: 'bootstrap',
                            fields: {
                                name: {
                                    validators: {
                                        notEmpty: {
                                            message: 'The name is required'
                                        }
                                    }
                                },
                            }
                        })
                        .on('success.form.fv', function(e) {
                            e.preventDefault();
                            var name = $('#first_name').val();
                            var mobile = $('#tel1').val();
                            var email = $('#email').val();
                            var message = $('#message').val();
                            var description = $('#description').val();
                            var source = $('#source').val();
                            var assignedTo = $('#assigned').val();
                            $.ajax({
                                type: "POST",
                                url: '/enquiry/add',
                                data: {
                                    name: name,
                                    mobile: mobile,
                                    email: email,
                                    message: message,
                                    description: description,
                                    source: source,
                                    assignedTo: assignedTo
                                },

                                success: function(data) {
                                    Materialize.toast('I am a toast!', 4000);
                                    return data;
                                }
                            });
                        });
                }
  

这是我得到的另一个错误

Uncaught TypeError: Cannot read property 'length' of undefined
at FormValidation.Framework.Bootstrap.validateField (formValidation.min.js:10)
at FormValidation.Framework.Bootstrap.validate (formValidation.min.js:10)
at HTMLFormElement.<anonymous> (formValidation.min.js:10)
at HTMLFormElement.dispatch (jquery.js:4737)
at HTMLFormElement.elemData.handle (jquery.js:4549)

请帮助我,提前致谢

4 个答案:

答案 0 :(得分:2)

经过大量搜索后,我遇到相同的错误。我发现我忘了在要验证的元素的父容器中添加一个类form-group,现在它对我来说很好用。

答案 1 :(得分:0)

首先在表单中添加方法帖子:

$(document).on('submit', '#formid', function() {
  $(this).validate({
      framework: 'bootstrap',
      fields: {
        name: {
          validators: {
            notEmpty: {
              message: 'The name is required'
            }
          }
        },
        email: {
          validators: {
            notEmpty: {
              message: 'The email is required'
            }
          }
        },
        mobile: {
          validators: {
            notEmpty: {
              message: 'The mobile is required'
            }
          }
        },
      }
    })
    .on('success.form.fv', function(e) {
      e.preventDefault();
      var Formdata = $(this).serialize();
      $.ajax({
        type: "POST",
        url: '', //add page url here
        data: Formdata, //send data from here,
        success: function(data) {
          alert(data);
        }
      });
      return false;
    });
});

答案 2 :(得分:0)

问题不是由表单结构引起的,因为表单结构是标准的,每个字段都放在.form-group元素内。

参考Uncaught RangeError: Maximum call stack size exceeded #204

答案 3 :(得分:0)

对我来说,我定义了两个具有相同名称的字段,例如

= hidden_field_tag(:budget, client.id) 
.form-group
  = f.label(:budget, 'Budgeted Amount', class: 'control-label col-sm-5')
    .col-sm-19
      = f.number_field(:budget, class: 'form-control', required: true)