I have the following bootstrap validations working fine for my form with id="validateForm".
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
</head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<div class="col-sm-12 col-md-12 well " style="padding:0px;" id="content" >
<h3>My heading!<img style="margin: 8px;" src="images/Sign-Info-icon.png" width="20" height="20" id="informationIcon" /></h3>
</div>
<!-- BEGIN Bootstrap form testing-->
<form class="form-horizontal" id="validateForm" method="POST" onsubmit="return false">
<div class="row">
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<div class="input-group">
<label class="control-label">Select your company:</label>
<select id = "companylist" name="userCompanylist" class="form-control" >
<option value=" " >Please select your company</option>
</select><span class="input-group-btn"><button id="myBtn" type="button" style="margin-top:27px;" class="btn btn-success">Add New Company</button></span>
</div>
</div>
</div>
<div class="col-md-offset-1 col-md-4">
<div class="form-group">
<label class="control-label">Select your employee sets:</label>
<select id = "employeeSetlist" name="employeeSets" class="form-control" >
<option value=" " >Please select employee set</option>
</select>
</div>
</div>
</div>
</form>
<!-- END form testing-->
</div>
<!-- /.container-fluid -->
<!-- For Dialog Begins -->
<div id="add_dialog" title="Add New Company" style="display:none;">
<form id="validateDialog">
<p>
<b>Name:</b><br/>
<input id="companyName" type="text" name="nameOfCompany" />
</p>
<p><b>Description:</b>
<!-- <input id = "companyDescription" type="text" name="description" /> -->
<textarea id="companyDescription" name="companyDescription" rows="4" cols="20"></textarea>
</p>
</form>
</div>
<!-- For Dialog Code Ends -->
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
<
<script type="text/javascript">
//Initialize function when document 'is ready'
$(document).ready(function() {
//BEGIN FORM Validations
$('#validateForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
employeeSets: {
validators: {
notEmpty: {
message: 'Please select a employee set'
}
}
},
userCompanylist: {
validators: {
notEmpty: {
message: 'Please select a company'
}
}
}
,
}
});
//END FORM Validations
//BEGIN DIALOGE FORM validations
/* $('#validateDialog').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
nameOfCompany: {
validators: {
notEmpty: {
message: 'Please enter company name'
}
}
},
companyDescription: {
validators: {
notEmpty: {
message: 'Please enter description'
}
}
}
,
}
}); */
//END DIALOGE FORM validations
});
</script>
</body>
</html>
I am trying to do the same validations for the jQuery dialog as well. and hence I added the validations for the form with id="validateDialog". The block of code that I added is as follows (this is commented out in the above code):
//BEGIN DIALOG FORM validations
$('#validateDialog').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
nameOfCompany: {
validators: {
notEmpty: {
message: 'Please enter company name'
}
}
},
companyDescription: {
validators: {
notEmpty: {
message: 'Please enter description'
}
}
}
,
}
});
//END DIALOG FORM validations
And it started throwing following error in the console.This error is shown i n the console as soon as the page loads and I haven’t even opened the dialog at this point of time.How to fix this?
Uncaught InternalError: too much recursion
jQuery 5
_getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12
_getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12
_getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12
_getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12
_getMessageContainer https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js:12
Screenshot below:
Note: I have removed lot of libraries related declarations for brevity purpose.