JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div style="display:none",id="showModelContainer">
<div id="modal-3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>do you want to save partial info</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true" id="finishNow">Finish Now</button>
<button class="btn btn-primary" data-dismiss="modal" id="doItLater">Do It Later</button>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="content">
<a href="#modal-3" role="button" class="btn" data-toggle="modal" id="confirmButton">Confirm</a>
</div>
<form name="asd" action="asdd" name="formName"id="refrenceSubmit" >
<input type="text" name="name11" id="nameField" value=""/>
<input type="text" name="name22" id="phoneField" value=""/>
<input type="submit" name="name33" value="Submit" />
</form>
CSS
@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
JavaScript
$(function(){
$("#refrenceSubmit").submit(function(){
var inputFieldsCount=0;
$(this).find('input[type=text]').each(function(){
if($(this).val() != "") inputFieldsCount+=1;
});
if(!inputFieldsCount){
alert("You must fill in at least one field");
return false;
}else if(($('#nameField').val()=="")&&
($('#phoneField').val()!="")){
$('#confirmButton').click()
$('#showModelContainer').show()
$('#doItLater').click("click",function (e) {
$('#refrenceSubmit').submit()
}
});
return false;
}
});
});