Develop Reference

Multiple fields not validated inside modal that are dynamically generated

I'm validating fields inside modal popup,for single field it is working but if more than one field are appended at a time then validation does not takes place on those fields. Here we can see we add new field by adding add field button but those newly field did'nt get validated.
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
required($(this))
});
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 1:</label> <inputname=sfs type=text class=form-control></div> <div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 2:</label><input name=ssf type=text class=form-control></div>");
required($(this))
});
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="col-md-9" id="dynamic_div">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>

You need call .each() on the dynamically added elements as well.
Dynamically added elements are not in DOM onload so ideally you need to do wrap .each() in a function when you add more fields to your modal just call that function again to check for empty inputs
To handle submit and store data we can .submit on your modal form. Get all the data via .serialize method and send all your form data to the backend file via ajax request.
Run Snippet below to see it working.
$(function() {
//Validate Data
var validate = $("#newModalForm").validate()
checkInput()
//Add dynamic inputs
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 1:</label> <input name=sfs type=text class=form-control></div> <div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 2:</label><input name=ssf type=text class=form-control></div>");
//Required Dynamic Input
checkInput()
});
//Validate all inputs
function checkInput() {
$('.form-control').each(function() {
required($(this))
});
}
//Required field message
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
//Submit form modal
$('#newModalForm').on('submit', function(e) {
//Prevent default submit behaviour
e.preventDefault()
//Store all the form modal form data
var data = $(this).serialize()
//Check all fieild have data
if (validate.errorList.length == 0) {
alert('All fields have value - Form will submit now')
//Request to backend
$.ajax({
url: 'your_url',
type: 'POST',
data: data,
success: function(response) {
//do something on success
},
error: function(xhr) {
//Handle errors
}
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="col-md-9" id="dynamic_div">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>

Bootstrap and Javascript modal not working properly

I have a model which contains violators info for adding values to the database. Now I want to delete a certain column and field and I have done so on other files but on my home.php and index.js if I delete the "Contact Number field" the adding of values to database stops working and I cant seem to find the bug. Everything works fine If I input a certain value on the contact number field but when I delete it and add new details the modal seems to not work.
home.php
<!DOCTYPE html>
<html>
<head>
<title>TMTRO Iloilo</title>
<!-- bootstrap css -->
<link rel="stylesheet" type="text/css"
href="assests/bootstrap/css/bootstrap.min.css">
<!-- datatables css -->
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
</head>
<body>
<nav class="navbar navbar-inverse" width="100%">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="javascript:window.location.href=window.location.href">TMTRO</a>
</div>
<ul class="nav navbar-nav">
<li>View Traffic Records</li>
<li>View Officer Info</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span>Logout</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h1 class="page-header">TMTRO Iloilo <small>Violators Records</small> </h1></center>
<div class="removeMessages"></div>
<button class="btn btn-default pull pull-right" data-toggle="modal" data-target="#addMember" id="addMemberModalBtn">
<span class="glyphicon glyphicon-plus-sign"></span> Add Violator
</button>
<br /> <br /> <br />
<table class="table table-responsive " id="manageMemberTable">
<thead>
<tr>
<th>ID #</th>
<th>Name</th>
<th>Last Name</th>
<th>License Number</th>
<th>Violation</th>
<th>Arrest Place</th>
<th>Address</th>
<th>Plate Number</th>
<th>Officer Name</th>
<th>Date&Time</th>
<th>Paid</th>
<th>Option</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- add modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="addMember">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><span class="glyphicon glyphicon-plus-sign"></span> Add Violator</h4>
</div>
<form class="form-horizontal" action="php_action/create.php" method="POST" id="createMemberForm">
<div class="modal-body">
<div class="messages"></div>
<div class="form-group"> <!--/here teh addclass has-error will appear -->
<label for="name" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
<!-- here the text will apper -->
</div>
</div>
<div class="form-group">
<label for="lname" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lname" name="lname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="lnumber" class="col-sm-3 control-label">License Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lnumber" name="lnumber" placeholder="License Number">
</div>
</div>
<div class="form-group">
<label for="violation" class="col-sm-3 control-label">Violation</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="violation" name="violation" placeholder="Violation">
</div>
</div>
<div class="form-group">
<label for="aplace" class="col-sm-3 control-label">Arrest Place</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="aplace" name="aplace" placeholder="Arrest Place">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-3 control-label">Address</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="address" name="address" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="pnumber" class="col-sm-3 control-label">Plate Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pnumber" name="pnumber" placeholder="Plate Number">
</div>
</div>
<div class="form-group">
<label for="cnumber" class="col-sm-3 control-label">Contact Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="cnumber" name="cnumber" placeholder="Contact Number">
</div>
</div>
<div class="form-group">
<label for="oname" class="col-sm-3 control-label">Officer Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="oname" name="oname" placeholder="Officer Name">
</div>
</div>
<div class="form-group">
<label for="datetime" class="col-sm-3 control-label">Date&Time</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="MM/DD/YYYY HH:MM:SS AM/PM">
</div>
</div>
<div class="form-group">
<label for="paid" class="col-sm-3 control-label">Paid</label>
<div class="col-sm-9">
<select class="form-control" name="paid" id="paid">
<option value="">~~SELECT~~</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /add modal -->
<!-- remove modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="removeMemberModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><span class="glyphicon glyphicon-trash"></span> Remove Member</h4>
</div>
<div class="modal-body">
<p>Do you really want to remove ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="removeBtn">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /remove modal -->
<!-- edit modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="editMemberModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Violator</h4>
</div>
<form class="form-horizontal" action="php_action/update.php" method="POST" id="updateMemberForm">
<div class="modal-body">
<div class="edit-messages"></div>
<div class="form-group"> <!--/here teh addclass has-error will appear -->
<label for="editName" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editName" name="editName" placeholder="Name">
<!-- here the text will apper -->
</div>
</div>
<div class="form-group">
<label for="editLname" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editLname" name="editLname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="editLnumber" class="col-sm-3 control-label">License Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editLnumber" name="editLnumber" placeholder="License Number">
</div>
</div>
<div class="form-group">
<label for="editViolation" class="col-sm-3 control-label">Violation</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editViolation" name="editViolation" placeholder="Violation">
</div>
</div>
<div class="form-group">
<label for="editAplace" class="col-sm-3 control-label">Arrest Place</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editAplace" name="editAplace" placeholder="Arrest Place">
</div>
</div>
<div class="form-group">
<label for="editAddress" class="col-sm-3 control-label">Address</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editAddress" name="editAddress" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="editPnumber" class="col-sm-3 control-label">Plate Number</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editPnumber" name="editPnumber" placeholder="Plate Number">
</div>
</div>
<div class="form-group">
<label for="editOname" class="col-sm-3 control-label">Officer Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editOname" name="editOname" placeholder="Officer Name">
</div>
</div>
<div class="form-group">
<label for="editDatetime" class="col-sm-3 control-label">Date&Time</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="editDatetime" name="editDatetime" placeholder="MM/DD/YYYY HH:MM:SS AM/PM">
</div>
</div>
<div class="form-group">
<label for="editPaid" class="col-sm-3 control-label">Paid</label>
<div class="col-sm-9">
<select class="form-control" name="editPaid" id="editPaid">
<option value="">~~SELECT~~</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
</div>
</div>
<div class="modal-footer editMemberModal">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /edit modal -->
<!-- jquery plugin -->
<script type="text/javascript" src="assests/jquery/jquery.min.js"></script>
<!-- bootstrap js -->
<script type="text/javascript" src="assests/bootstrap/js/bootstrap.min.js"></script>
<!-- datatables js -->
<script type="text/javascript" src="assests/datatables/datatables.min.js"></script>
<!-- include custom index.js -->
<script type="text/javascript" src="custom/js/index.js"></script>
</body>
</html>
index.js
var manageMemberTable;
$(document).ready(function() {
manageMemberTable = $("#manageMemberTable").DataTable({
"ajax": "php_action/retrieve.php",
"order": [[0,'desc']]
});
$("#addMemberModalBtn").on('click', function() {
// reset the form
$("#createMemberForm")[0].reset();
// remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');
$(".text-danger").remove();
// empty the message div
$(".messages").html("");
// submit form
$("#createMemberForm").unbind('submit').bind('submit', function() {
$(".text-danger").remove();
var form = $(this);
// validation
var name = $("#name").val();
var lname = $("#lname").val();
var lnumber = $("#lnumber").val();
var violation = $("#violation").val();
var aplace = $("#aplace").val();
var address = $("#address").val();
var pnumber = $("#pnumber").val();
var oname = $("#oname").val();
var datetime = $("#datetime").val();
var paid = $("#paid").val();
if(name == "") {
$("#name").closest('.form-group').addClass('has-error');
$("#name").after('<p class="text-danger">The Name field is required</p>');
} else {
$("#name").closest('.form-group').removeClass('has-error');
$("#name").closest('.form-group').addClass('has-success');
}
if(lname == "") {
$("#lname").closest('.form-group').addClass('has-error');
$("#lname").after('<p class="text-danger">The Lname field is required</p>');
} else {
$("#lname").closest('.form-group').removeClass('has-error');
$("#lname").closest('.form-group').addClass('has-success');
}
if(lnumber == "") {
$("#lnumber").closest('.form-group').addClass('has-error');
$("#lnumber").after('<p class="text-danger">The Lnumber field is required</p>');
} else {
$("#lnumber").closest('.form-group').removeClass('has-error');
$("#lnumber").closest('.form-group').addClass('has-success');
}
if(violation == "") {
$("#violation").closest('.form-group').addClass('has-error');
$("#violation").after('<p class="text-danger">The Violation field is required</p>');
} else {
$("#violation").closest('.form-group').removeClass('has-error');
$("#violation").closest('.form-group').addClass('has-success');
}
if(aplace == "") {
$("#aplace").closest('.form-group').addClass('has-error');
$("#aplace").after('<p class="text-danger">The Arrest Place field is required</p>');
} else {
$("#aplace").closest('.form-group').removeClass('has-error');
$("#aplace").closest('.form-group').addClass('has-success');
}
if(address == "") {
$("#address").closest('.form-group').addClass('has-error');
$("#address").after('<p class="text-danger">The Address field is required</p>');
} else {
$("#address").closest('.form-group').removeClass('has-error');
$("#address").closest('.form-group').addClass('has-success');
}
if(pnumber == "") {
$("#pnumber").closest('.form-group').addClass('has-error');
$("#pnumber").after('<p class="text-danger">The Plate Number field is required</p>');
} else {
$("#pnumber").closest('.form-group').removeClass('has-error');
$("#pnumber").closest('.form-group').addClass('has-success');
}
if(oname == "") {
$("#oname").closest('.form-group').addClass('has-error');
$("#oname").after('<p class="text-danger">The Officer Name field is required</p>');
} else {
$("#oname").closest('.form-group').removeClass('has-error');
$("#oname").closest('.form-group').addClass('has-success');
}
if(datetime == "") {
$("#datetime").closest('.form-group').addClass('has-error');
$("#datetime").after('<p class="text-danger">The Date&Time field is required</p>');
} else {
$("#datetime").closest('.form-group').removeClass('has-error');
$("#datetime").closest('.form-group').addClass('has-success');
}
if(paid == "") {
$("#paid").closest('.form-group').addClass('has-error');
$("#paid").after('<p class="text-danger">The Paid field is required</p>');
} else {
$("#paid").closest('.form-group').removeClass('has-error');
$("#paid").closest('.form-group').addClass('has-success');
}
if(name && lname && lnumber && violation && aplace && address && pnumber && oname && datetime && paid) {
//submi the form to server
$.ajax({
url : form.attr('action'),
type : form.attr('method'),
data : form.serialize(),
dataType : 'json',
success:function(response) {
// remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');
if(response.success == true) {
$(".messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
'</div>');
// reset the form
$("#createMemberForm")[0].reset();
// reload the datatables
manageMemberTable.ajax.reload(null, false);
// this function is built in function of datatables;
} else {
$(".messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
'</div>');
} // /else
} // success
}); // ajax subit
} /// if
return false;
}); // /submit form for create member
}); // /add modal
});
function removeMember(id = null) {
if(id) {
// click on remove button
$("#removeBtn").unbind('click').bind('click', function() {
$.ajax({
url: 'php_action/remove.php',
type: 'post',
data: {member_id : id},
dataType: 'json',
success:function(response) {
if(response.success == true) {
$(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
'</div>');
// refresh the table
manageMemberTable.ajax.reload(null, false);
// close the modal
$("#removeMemberModal").modal('hide');
} else {
$(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
'</div>');
}
}
});
}); // click remove btn
} else {
alert('Error: Refresh the page again');
}
}
function editMember(id = null) {
if(id) {
// remove the error
$(".form-group").removeClass('has-error').removeClass('has-success');
$(".text-danger").remove();
// empty the message div
$(".edit-messages").html("");
// remove the id
$("#member_id").remove();
// fetch the member data
$.ajax({
url: 'php_action/getSelectedMember.php',
type: 'post',
data: {member_id : id},
dataType: 'json',
success:function(response) {
$("#editName").val(response.name);
$("#editLname").val(response.lname);
$("#editLnumber").val(response.lnumber);
$("#editViolation").val(response.violation);
$("#editAplace").val(response.aplace);
$("#editAddress").val(response.address);
$("#editPnumber").val(response.pnumber);
$("#editOname").val(response.oname);
$("#editDatetime").val(response.datetime);
$("#editPaid").val(response.paid);
// mmeber id
$(".editMemberModal").append('<input type="hidden" name="member_id" id="member_id" value="'+response.id+'"/>');
// here update the member data
$("#updateMemberForm").unbind('submit').bind('submit', function() {
// remove error messages
$(".text-danger").remove();
var form = $(this);
// validation
var editName = $("#editName").val();
var editLname = $("#editLname").val();
var editLnumber = $("#editLnumber").val();
var editViolation = $("#editViolation").val();
var editAplace = $("#editAplace").val();
var editAddress = $("#editAddress").val();
var editPnumber = $("#editPnumber").val();
var editOname = $("#editOname").val();
var editDatetime = $("#editDatetime").val();
var editPaid = $("#editPaid").val();
if(editName == "") {
$("#editName").closest('.form-group').addClass('has-error');
$("#editName").after('<p class="text-danger">The Name field is required</p>');
} else {
$("#editName").closest('.form-group').removeClass('has-error');
$("#editName").closest('.form-group').addClass('has-success');
}
if(editLname == "") {
$("#editLname").closest('.form-group').addClass('has-error');
$("#editLname").after('<p class="text-danger">The LName field is required</p>');
} else {
$("#editLname").closest('.form-group').removeClass('has-error');
$("#editLname").closest('.form-group').addClass('has-success');
}
if(editLnumber == "") {
$("#editLnumber").closest('.form-group').addClass('has-error');
$("#editLnumber").after('<p class="text-danger">The Lnumber field is required</p>');
} else {
$("#editLnumber").closest('.form-group').removeClass('has-error');
$("#editLnumber").closest('.form-group').addClass('has-success');
}
if(editViolation == "") {
$("#editViolation").closest('.form-group').addClass('has-error');
$("#editViolation").after('<p class="text-danger">The Violation field is required</p>');
} else {
$("#editViolation").closest('.form-group').removeClass('has-error');
$("#editViolation").closest('.form-group').addClass('has-success');
}
if(editAplace == "") {
$("#editAplace").closest('.form-group').addClass('has-error');
$("#editAplace").after('<p class="text-danger">The Arrest Place field is required</p>');
} else {
$("#editAplace").closest('.form-group').removeClass('has-error');
$("#editAplace").closest('.form-group').addClass('has-success');
}
if(editAddress == "") {
$("#editAddress").closest('.form-group').addClass('has-error');
$("#editAddress").after('<p class="text-danger">The Address field is required</p>');
} else {
$("#editAddress").closest('.form-group').removeClass('has-error');
$("#editAddress").closest('.form-group').addClass('has-success');
}
if(editPnumber == "") {
$("#editPnumber").closest('.form-group').addClass('has-error');
$("#editPnumber").after('<p class="text-danger">The Plate Number field is required</p>');
} else {
$("#editPnumber").closest('.form-group').removeClass('has-error');
$("#editPnumber").closest('.form-group').addClass('has-success');
}
if(editOname == "") {
$("#editOname").closest('.form-group').addClass('has-error');
$("#editOname").after('<p class="text-danger">The Officer Name field is required</p>');
} else {
$("#editOname").closest('.form-group').removeClass('has-error');
$("#editOname").closest('.form-group').addClass('has-success');
}
if(editDatetime == "") {
$("#editDatetime").closest('.form-group').addClass('has-error');
$("#editDatetime").after('<p class="text-danger">The Date&Time field is required</p>');
} else {
$("#editDatetime").closest('.form-group').removeClass('has-error');
$("#editDatetime").closest('.form-group').addClass('has-success');
}
if(editPaid == "") {
$("#editPaid").closest('.form-group').addClass('has-error');
$("#editPaid").after('<p class="text-danger">The Paid field is required</p>');
} else {
$("#editPaid").closest('.form-group').removeClass('has-error');
$("#editPaid").closest('.form-group').addClass('has-success');
}
if(editName && editLname && editLnumber && editViolation && editAplace && editAddress && editPnumber && editOname && editDatetime && editPaid) {
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
dataType: 'json',
success:function(response) {
if(response.success == true) {
$(".edit-messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
'</div>');
// reload the datatables
manageMemberTable.ajax.reload(null, false);
// this function is built in function of datatables;
// remove the error
$(".form-group").removeClass('has-success').removeClass('has-error');
$(".text-danger").remove();
} else {
$(".edit-messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>'+
'<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
'</div>')
}
} // /success
}); // /ajax
} // /if
return false;
});
} // /success
}); // /fetch selected member info
} else {
alert("Error : Refresh the page again");
}
}

first you don't include jquery and bootstrap js
include this before the end of body
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

How to validate a wysihtml5-editor textarea field?

I am inserting a form in database and description is important so i want to make textarea field required.
Controller
function get()
{
$data =array('success' => false,'message' =>array());
$this -> form_validation -> set_rules('msg', 'Description', 'trim|required|max_length[1000]');
$this -> form_validation -> set_rules('feed_title', 'Feed Title', 'required');
$this -> form_validation -> set_rules('feed_link', 'Feed Link', 'required');
$this->form_validation->set_error_delimiters('<p class="text-danger">','</p>');
if($this->form_validation->run()== false)
{
foreach($_POST as $key => $value)
{
$data['message'][$key] = form_error($key);
}
}
else
{
$data['success']=true;
}
echo json_encode($data);
}
Form page
<!-- Modal -->
<div id="add_feed" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div id="feed_success"></div>
<form method="post" id="feed_form" action="<?php echo base_url()?>welcome/get">
<div class="modal-body">
<div class="form-group clearfix">
<label>Feed Title</label>
<input type="text" class="form-control" name="feed_title" id="feed_title" placeholder="Enter Feed Title"/>
</div>
<div class="form-group clearfix">
<label>Feed Link</label>
<input type="text" class="form-control" name="feed_link" id="feed_link" placeholder="Enter Feed Link"/>
</div>
<div class="form-group clearfix">
<label>Feed Short Description</label>
<textarea class="textarea form-control" placeholder="Message" name="msg" style="width: 100%; height: 125px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Add Feed</button><button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Ajax function
<script>
$(document).ready(function(){
$(".textarea").wysihtml5({});
$('#feed_form').on('submit',function(form){
form.preventDefault();
var me = $(this);
$.ajax({
url:me.attr('action'),
type:'post',
data:me.serialize(),
dataType:'json',
success:function(response){
if(response.success == true){
$("#feed_form")[0].reset();
$('#feed_success').addClass('alert alert-success').html("Feed Add Successfully!");
$('div.form-group').removeClass('alert alert-danger').find('.text-danger').remove();
$('div.form-group').removeClass('alert alert-success').find('.text-success').remove();
}
else{
$.each(response.message,function(key,value){
var element = $("#"+key);
element.closest('div.form-group').removeClass('alert alert-danger')
.addClass(value.length > 0 ? 'alert alert-danger' : 'alert alert-success').find('.text-danger').remove();
element.after(value);
});
}
}
});
});
});
</script>
Required is not working for it for other two inputs its working.

Bootstrap Selectpicker not working on a global modal

I made a global modal with this
<div id="GlobalModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<style>
#GlobalModal .modal-body .body-content {
margin:0;
width: 100%;
}
</style>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background:#337ab7;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:white">Not set...</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
and this is my button for calling the modal
<button id="new-communication" type="button" class="btn btn-info btn-sm">NEW <i class="glyphicon glyphicon-plus"></i></button>
and this is the content
<div class="hidden">
<div id="mc-communication">
<form id="loginForm" class="form-horizontal" role="form" method="POST" action="" >
<div class="form-group">
<label class="col-sm-2 control-label">Type</label>
<div class="col-sm-10">
<select class="form-control selectpicker show-tick" name="SingleSelectFieldType">
<option></option>
<option>Mobile - Private</option>
<option>Mobile - Office</option>
<option>Others</option>
</select>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Value</label>
<div class="col-sm-10 col-md-10">
<input class="form-control" type="tel" id="input-mobile-number" placeholder="" name="MobileNumberFieldType">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<div class="[ form-group ]">
<input type="checkbox" checked />
<span></span><span> </span></label>
<label>Primary</label>
</div>
</div>
</div>
</form>
</div>
</div>
and this is my jQuery of calling the content to get into the modal
class.modal.js
var Modal = {
Me: $('#GlobalModal'),
Title: 'Undefined Title',
Width: { xs: '25%', sm: '40%', md: '55%', lg: '70%', xl: '85%', full: '95%' },
Show: function (params) {
this.Me.find('.modal-body').empty();
this.Me.find('.modal-title').text((this.Title == null) ? this.Title : params.Title);
if(params.Content.substr(0, 1) == '#') { //To Check if content may come from a view or a div
this.Me.find('.modal-body').append($(params.Content).clone());
} else {
this.Me.find('.modal-body').load(params.URI);
}
this.Me.find('.modal-dialog').css('width', this.Width[params.Width]);
this.Me.modal('show');
}
}
and the script to call in my view
$(document).ready(function(){
$('#new-communication').on('click', function(){
Modal.Show({
Title: 'Communication',
Content: '#mc-communication',
Width: 'sm'
});
});
});
The thing is I can see the contents inside my select, but I can't select it and I also got a checkbox there and I can't check it. I tried making a new modal that is not global, but just for the communication, and it worked, I don't know what's wrong with my code.

You will have to reinitialize the selectpicker after appending the html
if(params.Content.substr(0, 1) == '#') { //To Check if content may come from a view or a div
this.Me.find('.modal-body').append($(params.Content).clone());
// This will reinitialize selectpicker. You may need to revalidate this logic since you are appending data and not replacing.
$('.selectpicker').selectpicker();
} else {
this.Me.find('.modal-body').load(params.URI, function() {
// Initialize the selectpicker after loading the data
$('.selectpicker').selectpicker();
});
}
The reason y this is happening is, the html data is dynamic and selectpicker is not initialized in newly added html elements

Viewing and Updating Data throught Modal Box In Laravel

guys. I need some help in viewing my data throught a modal box and replace it using update function.
Here's my button to view the modal box
{{ Form::open(array(
'route' => array('edit_spk', 'id'=> $spk_data->id),
'method' => 'put',
'style' => 'display:inline'
))
}}
<button class="btn btn-success btn-line btn-rect" data-toggle="modal" data-target="#editSpk"><i class="icon-pencil icon-white"></i> Edit</button>
{{ Form::close() }}
Here's my view code for this modal box
<div class="col-lg-12">
{{ Form::open(array('url'=>'edit_spk','class'=>'form-horizontal', 'id'=>'block-validate')) }}
<div class="modal fade" id="editSpk" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="H4"> Edit SPK</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-lg-2">Distribution Code</label>
<div class="col-lg-10">
<div class="input-group">
<input class="form-control" id="distribution_code" name ="distribution_code" type="text" data-mask="M99/99/99/9999"/>
<span class="input-group-addon">M99/99/99/9999</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Destination</label>
<div class="col-lg-9">
<input type="text" id="destination" name="destination" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">HLR</label>
<div class="col-lg-9">
<input type="text" id="hlr" name="hlr" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">First ICCID</label>
<div class="col-lg-9">
<input type="text" id="first_iccid" name="first_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Last ICCID</label>
<div class="col-lg-9">
<input type="text" id="last_iccid" name="last_iccid" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-2">Quantity</label>
<div class="col-lg-9">
<input type="text" id="quantity" name="quantity" class="form-control" />
</div>
</div>
<div class="form-actions no-margin-bottom" style="text-align:center;">
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-line btn-rect" id="confirm">Update SKU</button>
</div> </div>
{{Form::close()}}
</div>
</div>
</div>
</div>
<!--END OF MODAL EDIT SPK-->
<!-- Dialog show event handler -->
<script type="text/javascript">
$('#editSpk').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
var form = $(e.relatedTarget).closest('form');
$(this).get('.modal-body #distribution_code').data('form', form);
$(this).get('.modal-body #destination').data('form', form);
$(this).get('.modal-body #hlr').data('form', form);
$(this).get('.modal-body #first_iccid').data('form', form);
$(this).get('.modal-body #last_iccid').data('form', form);
$(this).get('.modal-body #quantity').data('form', form);
});
<!-- Form confirm (yes/ok) handler, submits form -->
$('#editSpk').find('.modal-footer #confirm').on('click', function(){
$(this).data('form').submit();
});
</script>
Here's the route :
Route::put('spk/edit/{id}', array('as'=>'edit_spk','uses'=>'SpkController#edit'));
And here's the controller
public function edit($id)
{
$spk = Spk::find($id);
$spk->title = Input::get('distribution_code');
$spk->body = Input::get('destination');
$spk->done = Input::get('hlr');
$spk->done = Input::get('first_iccid');
$spk->done = Input::get('last_iccid');
$spk->done = Input::get('quantity');
$spk->save();
Session::flash('message', 'Successfully updated SPK !');
return Redirect::to('spk_view');
}
Can someone help me to get the data and view it into the element in modal box and make it updated using laravel ? thanks for your kindness :)

I encountered the same problem, here is how i solved it.
My modal is on the index.blade page, as follows:
<a data-toggle="modal" role="button" href="{{ URL::to('user/'.$user->id.'/edit') }}" class="btn btn-default"><i class="icon-pencil"></i></a>
Then the modal:
#if(!empty($user))
<!-- Form modal -->
<div id="edit_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="icon-paragraph-justify2"></i> Edit User</h4>
</div>
<!-- Form inside modal -->
{!! Form::model($user,array('route' => ['user.update', $user->id],'method'=>'PATCH')) !!}
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>First name</label>
<input type="text" class="form-control" placeholder="Chinedu"
name="name" value="{!! $user->name !!}">
</div>
</div>
</div>
{!! Form::close() !!}
#endif
#if(!empty($user))
<script>
$(function() {
$('#edit_modal').modal('show');
});
</script>
#endif
My controller methods are:
public function index()
{
//View all users
$users= User::orderBy('name', 'ASC')->paginate(10);
return view('user.index',compact('users'));
}
public function edit($id)
{
//
$users= User::orderBy('name', 'ASC')->paginate(10);
$user= User::findOrFail($id);
return view('user.index',compact('users','user'));
}
Hope this helps