我正在尝试使用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)
请帮助我,提前致谢
答案 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)