How to validate a wysihtml5-editor textarea field? - javascript

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.

Related

Modal needs to both verify fields are entered, and close upon clicking the submit button

I have a modal i'm working on that, for whatever reason, will either dismiss upon clicking submit without validating the form field inputs, or it will simply reload the form upon entering and never go away, preventing my webpage from then being seen. My idea is that this will show upon opening the webpage, the user is required to enter information into it, and then proceed to the rest of my webpage unhindered. My modal form code is as follows:
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="formModalLabel">Services Contact Form</h3>
<button type="button" class="close" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="formAwesome">
<div class="modal-body">
<div class="form-group row">
<label for="firstName" class="col-sm-6 col-form-label">
First name
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="firstName" placeholder="John" required>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-sm-6 col-form-label">
Last name
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="lastName" placeholder="Doe" required>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-6 col-form-label">
E-mail address
</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" placeholder="john.doe#email.com" required>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="awesomeCheck">
<label class="form-check-label" for="awesomeCheck">
Yes, I consent to contact.
</label>
</div>
</div>
<div class="modal-footer">
<!--<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</form>
</div>
</div>
</div>
and this is my css:
<style>
#loading-img{
display:none;
}
.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
max-width:100%;
padding:3px;
display:none;
}
</style>
finally with this being my ajax query:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact-form").on("submit",function(e){
e.preventDefault();
if($("#contact-form [name='your_name']").val() === '')
{
$("#contact-form [name='your_name']").css("border","1px solid red");
}
else if ($("#contact-form [name='your_email']").val() === '')
{
$("#contact-form [name='your_email']").css("border","1px solid red");
}
else
{
$("#loading-img").css("display","block");
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "get_response.php",
data: sendData,
success: function(data){
$("#loading-img").css("display","none");
$(".response_msg").text(data);
$(".response_msg").slideDown().fadeOut(3000);
$("#contact-form").find("input[type=text], input[type=email], textarea").val("");
}
});
}
});
$("#contact-form input").blur(function(){
var checkValue = $(this).val();
if(checkValue != '')
{
$(this).css("border","1px solid #eeeeee");
}
});
});
</style>
Again, I would like to be able to have my modal form validated upon click submit and then to close without re-opening over and over(which is currently happening). So far I have tried the following:
$('#CompanyProfile').modal('hide');
then:
<button type="button" id="close_btn" class="close" data-dismiss="modal" aria-hidden="true">
<i class = "icons-office-52"></i>
</button>
$("#close_btn").trigger("click");
then:
$('#closemodal').click(function() {
$('#modalwindow').modal('hide');
});
and these all either JUST close the modal, or do not allow for the validation process to take place. If what i'm asking is not possible. I'd like to discuss alternatives.

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>

Laravel - Javascript | Form submits even after returning false

I am trying to verify user on submit and then continue the form submission if user is verified. I have written the verification logic and it works, but the form still submits if I return false when the verification fails.
Here is the form in question
<form method="POST" onsubmit="return verifyUser()" action="/pay_profile/{{$id->id}}" id="payment_form" name="payment_form">
<div class="col-md-12">
{{csrf_field()}}
<div class="form-group">
<label class="control-label col-md-3" style="text-align: left; margin-left: 10px; font-weight: bold;">Payment Amount:</label>
<div style="width: 50%" class="input-group col-md-5">
<input required name="amount" id="amount" type="text" class="form-control" autofocus="true" onfocus="rupee()" onkeyup="amount_in_words({{$id->loan->loan_amount - $id->loan->collected_amount}})" placeholder="Enter Amount..." >
<span class="input-group-btn">
<button id="pay" name="pay" data-target="#stack1" data-toggle="modal" disabled class="btn red" type="button">Pay</button>
</span>
</div>
<div class=" form-group col-md-12" style="color: green; font-weight: bold; font-style: italic; padding-left: 250px; margin-top: 5px;" id="container">
</div>
</div>
</div>
<div id="stack1" class="modal fade" tabindex="-1" data-width="400">
<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">Confirmation</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Enter Password</h4>
<p>
<input id="password" name="password" required type="password" class="col-md-12 form-control" autofocus="true"> </p>
<p>
<div style="color: red" id="error_pwd"></div>
</div>
</div>
</div>
<div class="modal-footer">
<a type="resets" style="margin-right: 30px;" data-dismiss="modal" class="btn dark btn-outline">Close</a>
<button type="submit" class="btn default btn-lg red">Ok</button>
</div>
</div>
</form>
and here is the onsubmit function
<script type="text/javascript">
function verifyUser()
{
function handleData( responseData ) {
console.log(responseData);
if( responseData== 'success')
{
document.getElementById("payment_form").submit();
console.log('success');
return true;
}
else
{
console.log('fail');
document.getElementById('error_pwd').innerHTML="<b>Wrong Password!</b>";
return false;
}}
var verifyPass=document.getElementById('password').value;
if(!verifyPass || verifyPass.trim().length == 0)
{
var verifyPass='fail';
}
$.ajax({
url: '/verify/'+verifyPass,
success: function ( data, status, XHR ) {
handleData(data);}
});
}
</script>

Just return false, you are submitting the form anyways (document.getElementById("payment_form").submit();). The problem comes because handleData() is executed asynchronously.
function verifyUser() {
function handleData(responseData) {
if (responseData == 'success') {
document.getElementById("payment_form").submit();
} else {
document.getElementById('error_pwd').innerHTML = "<b>Wrong Password!</b>";
}
}
var verifyPass = document.getElementById('password').value;
if (verifyPass && verifyPass.trim().length > 0) {
$.ajax({
url: '/verify/' + verifyPass,
success: function(data, status, XHR) {
handleData(data);
}
});
} else {
document.getElementById('error_pwd').innerHTML = "<b>No password provided!</b>";
}
//Return false to prevent form submition.
return false;
}

Fullcalendar: Bootstrap Modal Box not displaying elements correctly

A Full calendar Script in one of my project in which i added a Bootstrap modal. I am making it to popup on submit of a Button in my page.But the elements inside the modal are not visible clearly. where am i making the mistake?.
I do have a datepicker in my code, but it is also not displayed with proper 'prev','next' buttons. I have added a sample pic too.Kindly help me..
The following is my code:-
<div class="modal fade in" id="modal_calendar" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<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">Add Event </h4>
</div>
<div class="modal-body">
<form id="event_frm" class="form-horizontal">
<div class="form-group">
<div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventsubject">calendar_eventsubject</label><div class="col-sm-8"><input type="text" name="calendar_eventsubject" value="" id="calendar_eventsubject" placeholder="calendar_eventsubject" data-validation-required-message="Enter the calendar_eventsubject" class="form-control" required="">
</div></div> </div>
<div class="form-group">
<div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventbody">calendar_eventbody</label><div class="col-sm-8"><textarea name="calendar_eventbody" cols="40" rows="3" id="calendar_eventbody" placeholder="calendar_eventbody" data-validation-required-message="Enter the calendar_eventbody" class="form-control" required=""></textarea>
</div></div>
</div>
<div class="row">
<div class="form-group "><label class="control-label col-sm-3 " for="lbl_disp_code">common_date</label><div class="col-sm-8"><input type="text" name="lbl_disp_code" value="" id="lbl_disp_code" placeholder="common_date" data-validation-required-message="Enter the common_date" class="mts_date form-control" data-format="DD-MM-YYYY" data-single-date-picker="true" data-show-dropdowns="true" required="">
</div></div> <div class="control-label col-sm-3">
<label for="start_date">Start Date</label>
</div>
<div class="col-sm-7">
<input type="text" class="form-control hasDatepicker" id="event_start_date" placeholder="Start Date">
</div>
</div>
</form>
</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="save_event">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
customButtons: {
EventButton: {
text:'Add Event',
click:function(event, jsEvent, view){
$('#modal_calendar').modal('show');
}
}
},
utc: true,
header: {
left: 'prev,next today EventButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
});
$('#event_start_date').datepicker();
$('#save_event').click(function() {
var subject =$('#calendar_eventsubject').val();
var body =$('#calendar_eventbody').val();
var start_date = $('#event_start_date').val();
if($('#calendar_event_subject').val() =='') {
alert('subject required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
if($('#calendar_event_body').val() == '') {
alert('Body required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
if($('#event_start_date').val() == '') {
alert('Start Date required'); return false;
} else {
$("#modal_calendar").modal('hide');
}
$.ajax({
cache: false,
type: "POST",
url:"calendar/save_event",
data : {'subject' : subject,'body' : body,'start_date' : start_date},
dataType: 'json',
success: function(result){
if (result!=null){
}
}
});
});
});
</script>
<style>
.datepicker
{
z-index:1151 !important;}
</style>
From this my output is like this:-

Categories

Resources