Question

Jquery 表单验证未捕获的 rangeerror：超出最大调用堆栈大小

2017-02-11

2927

jquery css ajax html

我正在尝试使用 Jquery 表单验证。但我收到未捕获范围错误：超出最大调用堆栈。我正在使用 Materialize css。

this is the error i am getting

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)

This is my jquery and html code

 <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;
                                }
                            });
                        });
                }

and this is the one more error iam getting

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)

请帮助我，提前致谢

Answer 1

我遇到了同样的错误，经过大量搜索后，我发现我忘记在我们正在验证的元素的父容器中添加一个类 form-group，现在它对我来说工作正常。

Answer 2

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

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

Answer 3

首先在表单中添加方法post：

$(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;
    });
});