I've been struggling with implementing Jquery form validation and keep encountering the Uncaught range error: maximum call stack exceeded. The issue occurs while using materialize CSS.
This is the specific error I am facing:
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)
Here is my jquery and html code snippet that triggers the error:
<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;
}
});
});
}
In addition to the previous error, another one I'm encountering is:
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)
If anyone can provide assistance on this matter, it would be greatly appreciated. Thank you in advance!