I am trying to get a Bootstrap 3 modal form to trigger a form.submit() in jQuery, but no matter what I try, I can't get it to fire .
<div class="modal fade" id="modal-signup" tabindex="-1" role="dialog" aria-labelledby="modal-signup" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Sign up</h4>
</div>
<div class="modal-body">
<form role="form" action="/" id="modal-signup-form" >
<div class="form-group">
<input type="email" class="form-control input-lg" placeholder="email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="confirm">
</div>
</form>
</div>
<div class="modal-footer">
<p>Already have account ? Sign in here.</p>
<input type="submit" class="btn btn-success btn-block btn-lg" value="Sign up">
</div>
</div>
</div>
</div>
and the JS
$("#modal-signup-form").submit(function( event ) {
event.preventDefault();
alert("made it");
$.ajax({
type: "POST",
url: "adduser.php",
data: $('form.adduser_model').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("form.noteform").modal('hide');
},
error: function () {
alert("failure");
}
});
return false;
});
I've created a fiddle...
http://jsfiddle.net/menriquez/sreco3jt/
If you hit "Sign Up" and "Sign Up" in the model form, I would expect the event to fire and see the alert, but it doesn't.
It's because the submit button isn't inside the #modal-signup-form form element.
Either add the button to the inside of the <form>, or add an event handler to trigger a submit when the button is clicked:
$(document).on('click', '#modal-signup-form-submit', function (e) {
$('#modal-signup-form').submit();
});
Updated Example
You have to add following submit button code before closing of form tag.
<input type="submit" class="btn btn-success btn-block btn-lg" value="Sign up">
JS Fiddle
Related
$('#form1').on('click',function(e){
e.preventDefault();
$('#emailModal').modal("show"); // open the modal
});
$(document).on('click','#sendEmail',function(){
$('#UpdateEmailModal').modal("show"); // open the modal
}
});
$(document).on('click','#UpdateSendEmail',function(){
$('#form1method').submit();
});
$(document).on('click','#Update_Close',function(){
$('#form2method').submit();
});
$(document).on('click','#Close',function(){
window.location = "<?php echo base_url(); ?>controller/page_method";
});
<!--Form 1-->
<form action="<?php echo base_url(); ?>mycontroller/method1" method="post" id="form1method">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit" id="form1">Submit</button>
</form>
<!--Form 2 -->
<form action="<?php echo base_url(); ?>mycontroller/method2" method="post" id="form2method">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit" id="form2">Submit</form>
</form>
<!--Modal 1 -->
<!--Email Modal -->
<div id="emailModal" 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">Send Email to User</h4>
</div>
<div class="modal-body">
<label class="col-md-3">To Email</label>
<div class="form-group col-md-9">
<input type="email" class="form-control" name="email_id" id="email_id" placeholder="Email ID">
</div>
<label class="col-md-3">Message</label>
<div class="form-group col-md-9">
<textarea name="message" id="message" class="form-control" placeholder="Message"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info btn-block" id="sendEmail"><strong>Update</strong></button>
<button class="btn btn-danger pull-right btn-block" data-dismiss="modal" id="Close"><strong>Close</strong></button>
</div>
</div>
</div>
</div>
<!--Modal 2 -->
<!--Email Status and Update Modal -->
<div id="UpdateEmailModal" 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">Update Form</h4>
</div>
<div class="modal-body">
<p>Click Submit to Update and Send Email (or) Click Cancel to Update</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info btn-block" id="UpdateSendEmail"><strong>Submit</strong></button>
<button class="btn btn-danger pull-right btn-block" data-dismiss="modal" id="Update_Close"><strong>cancel</strong></button>
</div>
</div>
</div>
</div>
enter code here
<?php
*//My Controller*
public function method1(){
$result = $this->model->update_model();
if($result == true){
$this->session->set_flashdata("msg","post_page");
redirect("post_page");
}}
public function method2(){
$result = $this->model->update_model2();
if($result == true){
$this->session->set_flashdata("msg","post_page");
redirect("post_page");
}}
*`//My Model`*
public function update_model(){
$data = array(
'name' => $this->input->post("name"),
'email' => $this->input->post("email")
);
$this->db->update('user',$data);
}
public function update_model2(){
$data = array(
'name' => $this->input->post("name"),
'email' => $this->input->post("email"),
'status' => "1"
);
$this->db->update('user',$data);
}
?>
When clicking edit form, edit page will open, in that i have two forms (Form1 and Form2). Only one form should appear in a page. When i click submit of Form1 a Modal1 will open and clicking Update button the Modal2 will open. Based on the two buttons(Submit and Cancel) in Modal2 a response should happen. Like if i click "Submit" method2 in Controller should execute or else if i click method1 should execute. How do do it in Controller?. I don;t know if i doing it correctly. If you guys have any idea to solve this, please help me out.
Thanks in Advance
You can make each of your submit button with a different name. So when you press the submit button, like in the form1, form1submit_btn, the page reload and simply check the post input :
You button
<button type="submit" name="form1submit_btn" class="btn btn-info btn-block" id="sendEmail"><strong>Update</strong></button>
Both of your form action have the same action action="<?base_url("myController/method")?>, and you treat them directly in the controller :
function method(){
//form 1 has been submit
if($this->input->post("form1submit_btn")){
$result = $this->model->update_model();
if($result == true)
$this->session->set_flashdata("msg","post_page");
}
//form 2 has been submit
if($this->input->post("form2submit_btn")){
$result = $this->model->update_model2();
if($result == true)
$this->session->set_flashdata("msg","post_page");
}
redirect("post_page");
}
I have a modal, e.g the modal is in modal.html, the method i wrote in a javascript file modal.js. when I am trying to submit data through modal, it is not working properly. the code is below. please help me someone.
/modal.html
<div class="col-md-12 text-right">
<button type="button" data-toggle="modal" data-target="#myModal">Update User Information</button>
<div class="modal fade" id="myModal" 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">Enter User Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" id="user_name" placeholder="User name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email_id" placeholder="Enter email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="address" placeholder="Enter Address">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" id="myFormSubmit">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
/modal.js
$(function() {
$('#myFormSubmit').click(function () {
$.post("/api/adduserInfo/v1",
{
user_name : $("#user_name").val(),
email : $("#email_id").val(),
address : $("#address").val()
});
});
});
You can use something like this (you will have to get the parametres via post on the server side):
<!-- FORM -->
<form id="idform">
<!-- FORM INPUTS -->
<input class="btn btn-large btn-primary" value="Submit" type="submit">
</form>
<script>
// Variable to hold request
var request;
$("#idform").submit(function(event) {
// Prevent default posting of form - put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
$.ajax({
url: '/api/adduserInfo/v1',
type: 'post',
data: serializedData,
beforeSend: function () {
$("#divtoaddresult").html("Processing, please wait...");
},
success: function (response) {
$("#divtoaddresult").html(response);
}
});
});
</script>
i'm using the function eventClick on fullcalendarand i have the following problem, whenever i click at an event a modal is opening and i can edit this specific event, and when i click on save (with another onclick function) there is a confirm that is firing as many times as the modal has been opened previously.
let me explain it with my piece of code..
eventClick: function (calEvent, jsEvent, view) {
$('#myModalEditEvent').modal('show');
$("#deleteEventfromEditModal").click(function () {
if (!confirm("are you sure?")) {
return 0;
}
else {
var classID = calEvent.id;
var deleteRequest = {
classID: classID,
};
var dataString = JSON.stringify(deleteRequest); // parsing the request above.
$.ajax({ // starting an ajax func
})
};
});
}
this is my html code:
<div class="modal fade" id="myModalEditEvent" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="EditEventHeader"></h4>
</div>
<div class="modal-body">
<div class="form-group">
<select id="ClassesDDLEdit" class="form-control"></select>
</div>
<div class="form-group">
<select id="GuidesDDLEdit" class="form-control"></select>
</div>
<div class="input-group bootstrap-timepicker timepicker">
<input id="classStartTimeEdit" type="text" class="form-control input-small" placeholder="Start time">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div><br />
<div class="input-group bootstrap-timepicker timepicker">
<input id="classEndTimeEdit" type="text" class="form-control input-small" placeholder="start time">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div><br />
<div class="modal-footer">
<button type="button" id="AddEventAfetEditing" class="btn btn-info center-block" data-toggle="modal" data-target="#myModalEditEvent">Save</button><br />
<button type="button" id="deleteEventfromEditModal" class="btn btn-danger glyphicon glyphicon-trash center-block" data-toggle="modal" data-target="#myModalEditEvent"></button>
</div>
</div>
</div>
</div>
</div>
what can i do to prevent it from happening?
thanks all the help!
Change your following line
$("#deleteEventfromEditModal").click(function () {
as follow
$("#deleteEventfromEditModal").unbind( "click" ).click(function () {
Because on every click you are binding a click event. Therefore you need to unbind it every time
You should do this
$("#deleteEventfromEditModal").click(function () {
...
});
outside the eventClick, and do it in the page load for exemple.
$(document).ready(function(e){...})
I've been trying to validate some control in a modal dialog for days now, and despite all the examples and other posts here on SO I can't seem to get it working...
In my webpage I have a button that opens a modal dialog. That modal dialog has three required input boxes: one for text and two for positive numeric values. I want to validate the inputs when the user clicks save using the fancy bootstrap feedback scheme like these examples:
http://formvalidation.io/examples/modal/
http://1000hz.github.io/bootstrap-validator/
If the input is valid then I'll take the values and process accordingly. I haven't gotten this far though. The modal does open currently.
I know these examples use forms, but since I'm using a master page, a nested form in my content page isn't allowed. So how can I validate the input and apply the feedback style to the invalid controls when the user clicks save?
<!-- Button to trigger modal -->
<button type="button" id="btnOpenModal" class="btn btn-info" data-toggle="modal" data-target="#myModal">Add</button>
<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" data-toggle="validator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">Here is the modal dialog</h4>
</div>
<div id="loginForm" class="modal-body form-horizontal">
<h5>Describe what to do here...</h5>
<div class="form-inline form-group">
<label for="mdltxtId" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mdltxtId" name="mdltxtId" placeholder="item description" />
</div>
</div>
<div class="form-inline form-group">
<label for="mdltxtWgt" class="col-sm-3 control-label">Weight (LB)</label>
<div class="col-sm-9">
<input type="text" pattern="^[0-9]{1,}" title="Positive number only" class="form-control" id="mdltxtWeight" name="mdltxtWeight" placeholder="weight in pounds" />
</div>
</div>
<div class="form-inline form-group">
<label for="mdltxtLength" class="col-sm-3 control-label">Length (IN)</label>
<div class="col-sm-9">
<input type="text" pattern="^[0-9]{1,}" title="Positive number only" class="form-control" id="mdltxtLength" name="mdltxtLength" placeholder="length in inches" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-primary" />
<%--<button type="submit" class="btn btn-primary">Save changes</button>--%>
</div>
</div>
</div>
</div>
I probably could change the project to not use a master page to make life easier with forms - it's not required (default Web Forms project in VS2015 sets this up automatically).
Just to add...I'm primarily a VB.NET winforms developer so I'm probably missing a lot of fundamentals on ASP.NET and javascript so go easy on me.
Using the Bootstrap Validate plugin, you cannot validate input elements that are outside of a <form></form>. There is no workaround for this limitation.
with a Form id="Form"
<form id="Form">
<div class="modal-body form-horizontal">
<h5>Describe what to do here...</h5>
<div class="form-inline form-group">
<label for="mdltxtId" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mdltxtId" name="mdltxtId" placeholder="item description" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-primary" />
<%--<button type="submit" class="btn btn-primary">Save changes</button>--%>
</div>
</form>
Fiddle with Form
When form id="Form" changed into a div id="Form" and now the same code cannot be validate by Bootstrap Validate plugin. The plugin does nothing without a <form></form>.
<div id="Form" class="modal-body form-horizontal">
<h5>Describe what to do here...</h5>
<div class="form-inline form-group">
<label for="mdltxtId" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mdltxtId" name="mdltxtId" placeholder="item description" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-primary" />
<%--<button type="submit" class="btn btn-primary">Save changes</button>--%>
</div>
Fiddle with Div
So as Shehary pointed out the Bootstrap Validate plugin won't work on a modal dialog that is not a form. So to emulate the same effect, I added a span tag to each input to provide the feedback text and use javascript to to the validating and add the feedback styles.
Here is the modal:
<div class="modal fade" id="myModal" data-toggle="validator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">Here is the modal dialog</h4>
</div>
<div id="loginForm" class="modal-body form-horizontal">
<h5>Describe what to do here...</h5>
<div class="form-inline form-group">
<label for="mdltxtId" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" pattern="^.{1,}" title="Item name required" class="form-control" id="mdltxtId" name="mdltxtId" placeholder="item description"/>
<span id="mdlIdHelper" class="help-block h6"></span>
</div>
</div>
<div class="form-inline form-group">
<label for="mdltxtWgt" class="col-sm-3 control-label">Weight (LB)</label>
<div class="col-sm-9">
<input type="text" pattern="^[+]?([.]\d+|\d+[.]?\d*)" title="Positive number only" class="form-control" id="mdltxtWeight" name="mdltxtWeight" placeholder="weight in pounds" />
<span id="mdlWgtHelper" class="help-block h6"></span>
</div>
</div>
<div class="form-inline form-group">
<label for="mdltxtArm" class="col-sm-3 control-label">Arm (IN)</label>
<div class="col-sm-9">
<input type="text" pattern="^[0-9]{1,}" title="Positive number only" class="form-control" id="mdltxtArm" name="mdltxtArm" placeholder="arm length in inches" />
<span id="mdlArmHelper" class="help-block h6"></span>
</div>
</div>
</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="btnmdlSave2" onclick="CloseModal(); return false;">Save</button>
</div>
</div>
</div>
</div>
And here is the javascript:
function OpenModal() {
//window.alert('opening modal');
ResetModal();
//window.alert('modal was reset');
$('#myModal').modal('show');
//window.alert('modal was opened');
}
function ResetModal() {
//window.alert('beginning modal reset');
var mdlId = $('#mdltxtId');
var mdlWgt = $('#mdltxtWeight');
var mdlArm = $('#mdltxtArm');
// reset the item description input group
mdlId.closest('.form-group').removeClass('has-error').removeClass('has-success');
mdlId.val('');
mdlIdHelper.innerHTML = "";
// reset the item weight input group
mdlWgt.closest('.form-group').removeClass('has-error').removeClass('has-success');
mdlWgt.val('');
mdlWgtHelper.innerHTML = "";
// reset the arm length input group
mdlArm.closest('.form-group').removeClass('has-error').removeClass('has-success');
mdlArm.val('');
mdlArmHelper.innerHTML = "";
//window.alert('finished modal reset');
}
function ValidateModal() {
var mdlId = $('#mdltxtId');
var mdlWgt = $('#mdltxtWeight');
var mdlArm = $('#mdltxtArm');
var val = true
// Check if the input is valid
if (!mdlId.val()) {
// Add errors highlight
mdlId.closest('.form-group').removeClass('has-success').addClass('has-error');
mdlIdHelper.innerHTML = "You must enter a description";
val = false
} else {
// Add success highlight
mdlId.closest('.form-group').removeClass('has-error').addClass('has-success');
mdlIdHelper.innerHTML = "";
}
// Check if the input is valid
if (!mdlWgt.val() || !$.isNumeric(mdlWgt.val()) || mdlWgt.val() <= 0) {
// Add errors highlight
mdlWgt.closest('.form-group').removeClass('has-success').addClass('has-error');
mdlWgtHelper.innerHTML = "Item weight must be a positive numeric value";
val = false;
} else {
// Add success highlight
mdlWgt.closest('.form-group').removeClass('has-error').addClass('has-success');
mdlWgtHelper.innerHTML = "";
}
// Check if the input is valid
if (!mdlArm.val() || !$.isNumeric(mdlArm.val()) || mdlArm.val() <= 0) {
// Add errors highlight
mdlArm.closest('.form-group').removeClass('has-success').addClass('has-error');
mdlArmHelper.innerHTML = "Arm length must be a positive numeric value";
val = false;
} else {
// Add success highlight
mdlArm.closest('.form-group').removeClass('has-error').addClass('has-success');
mdlArmHelper.innerHTML = "";
}
// return false if there was an error in the modal dialog. A FALSE return value will prevent a postback to the server. Might be redundant since the button onclick also has 'return false'.
return val;
}
I faced the same problem, probably it's too late but here is the code I did. It's useful if you don't care about use ajax and json...
<!-- Modal -->
<div class="modal fade" id="modalOption" tabindex="-1" role="dialog" aria-labelledby="modalOptionLabel">
<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" id="modalOptionLabel">Options</h4>
</div>
<div class="modal-body">
#using (Html.BeginForm("Save", "Option", FormMethod.Post, new { id = "frmTest" }))
{
Html.AntiForgeryToken();
<div class="row">
<div class="col-md-6">
<div class="col-md-6">
#Html.LabelFor(model => model.VALUE1)
#Html.TextBoxFor(model => model.VALUE1, String.Format("{0:#0.00}", Model.VALUE1), new { #class = "form-control input-decimal" })
#Html.ValidationMessageFor(model => model.VALUE1, "", new { #class = "label label-danger" })
</div>
</div>
<div class="col-md-6">
<div class="col-md-6">
#Html.LabelFor(model => model.VALUE2)
#Html.TextBoxFor(model => model.VALUE2, String.Format("{0:#0.00}", Model.VALUE2), new { #class = "form-control input-decimal" })
#Html.ValidationMessageFor(model => model.VALUE2, "", new { #class = "label label-danger" })
</div>
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm crud-save" id="SaveOption" data-target="#modalOption" data-container="#divOptionGrid" form="frmTest">Save</button>
</div>
</div>
</div>
</div>
<script>
$(document).off('click', '.crud-save').on('click', '.crud-save', function (event) {
var formName = $(this).attr("form");
var form = $("#" + formName)
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
var isValid = $(form).validate().form();
if (!isValid) {
event.preventDefault();
return false;
}
var formInfo = form.serialize();
//here goes your ajax implementation
$.ajax({
type: form.attr('method'),
dataType: "json",//response by using json
url: form.attr('action'),
data: formInfo,
success: function (customJson) //just return a JsonResult from the controller if the process is successful
{
if(customJson.isDone){
alert("Done");
$("#modalOption").modal('hide');
}
else{
alert(customJson.errorMessage);
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
}
});
</script>
I have a form in a modal with some required fields, but when I hit submit the form just reloads and I don't get any message for validation that I am using for submitting the form jQuery, as below :
<script>
$('#InfroTextSubmit').click(function(){
$('#InfroText').submit();
});
</script>
The Twitter Bootstrap Modal Code is :
<!-- Modal1 -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Edit Introduction</h3>
</div>
<div class="modal-body">
<form id="InfroText" method="POST">
<input type="hidden" name="InfroText" value="1"/>
<table>
<tr><td>Title</td><td><input type="text" name="title" style="width:300px" required="require"/></td></tr>
<tr><td>Introudction</td><td><textarea name="contect" style="width:300px;height:200px"></textarea></td></tr>
</table>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="InfroTextSubmit">Save changes</button>
</div>
</div>
<script>
$('#InfroTextSubmit').click(function(){
$('#InfroText').submit();
});
</script>
So how can i Validate the Form and not let the model close and reload if something is wrong with the form ?
Regards,
You don't have to add any script for validating form text fields if you added the required attribute.
Try this
<input type="text" name="title" style="width:300px" required="required"/>
or
<input type="text" name="title" style="width:300px" required/>
You can add "data-dismiss=modal" to the InfroTextSubmit button, and then use 'return false' on the '#InfroTextSubmit' click function to prevent the form from closing. If the form is valid you call 'submit()'.
Button code:
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="save">Save changes</button>
Click function:
$('#save').click(function(){
if ($('#myField1').val()==="") {
// invalid
$('#myField1').next('.help-inline').show();
return false;
}
else {
// submit the form here
$('#InfroText').submit();
return true;
}
});
There a several different approaches to the validation itself.
Working on Bootply: http://bootply.com/60244