我有一个modal，在此模式中我有一个form，当我填写此表单并单击“发送”时，会自动显示另一个模式，说“谢谢”，但是，如果我让表单为空，然后我发送，表单显示“您需要填写此字段”，上方显示模式句“谢谢” ...结论是，
我希望首先验证表单，然后在所有表单填写完毕后显示模式：“谢谢”，bootstrap有onsubmit选项，¿我可以用它来验证模式吗javascript ？还是验证表单的更好方法？
<div class="modal fullscreen-modal fade fondo-gris modal-cotizador" id="...-...-..." tabindex="1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
<div class="max-height">
<div class="modal-dialog max-height">
<div class="modal-content" style="background-color: #f6f5f3">
<div class="modal-...-...">
<div>
<h1 class="centrar tit-producto-rel-..."><br>
</h1>
</div>
</div>
<div class="modal-body ancho-modal" style="">
<form id="form-cotizacion-..." method="POST">
<div id="lista">
<!-- Aquí irá la lista -->
</div>
<h5>...:</h5>
<p>...</p>
<div class="centrar"><h4 class="centrar">...</h4>
<select id="hola" class="centrar" type="text" name="selecciona-familia" style="width: 50%">
<i class="fa fa-chevron-down"></i>
<option>...</option>
</select>
</div>
{% csrf_token%}
<input type="hidden" name="origen" value="{{request.path}}">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label class="letra-verde"> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="modelo" placeholder="ej. ... ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label class="letra-verde"> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="serie" placeholder="ej. ... ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ... (s)</label>
<span style="color: red">*</span><br>
<input type="text" name="nombre" placeholder="ej. ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ... (s)</label>
<span style="color: red">*</span><br>
<input type="text" name="apellidos" placeholder="ej. ..." required>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ...</label>
<span style="color: red">*</span><br>
<select name="..." required>
<option value=""> <b> .... </b> </option><br>
<option value="...">... </option>
<option value="..."> <b> ..</b> </option><br>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label>...</label>
<span style="color: red">*</span><br>
<select name="..." required>
<option value=""><b>...</b></option><br>
<option value="..."> <b> ...</b> </option><br>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<label> ...</label>
<span style="color: red">*</span><br>
<input type="email" name="..." placeholder="..@....com" required><br>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lada-...-cot-...">
<label> ...</label>
<span style="color: red">*</span><br>
<input type="text" name="..." placeholder="...">
<input type="text" name="..." placeholder="0000 0000" required>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>...</label><br>
<textarea style="border: 1px solid black" rows="7" name="..." placeholder="..."></textarea>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 term-cond-modal">
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<input type="submit" class="fondo-verde botton-cotizar" value="..." data-toggle="modal" data-target="#exampleModalCenter" style="border:none;"></input>
<input id="close-modal" type="hidden" class="btn btn-default" data-dismiss="modal">
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade modal-inside-cotizar all-ref" id="exampleModalCenter" data-keyboard="false" role="dialog" aria-labelledby="exampleModalCenterTitle" tabindex="2" aria-hidden="true" data-backdrop="static" style="padding-top: 130px">
<div class="modal-dialog modal-dialog-centered" role="document" >
<div class="modal-content ...-cotizacion-modal ">
<div class="modal-header" style="border-bottom-width: 0px!important">
<button type="button" class="close close-modal-ref" data-dismiss="modal" style="position: absolute;top: 3%;padding-top: 5%;right: 5%;color: black;opacity: 1;background-size: contain;background-repeat: no-repeat;width: 24px;height: 30px; background-image: url('-...');"></button>
</div>
<div class="modal-body" style="text-align: center;">
<img src="..." style="width: 19%;margin-bottom: 10px;">
<h3>.......</h3>
<div style="padding-left: 7%;padding-right: 7%;margin: 20px 0px 20px 0px">
<h6>....</h6>
</div>
<h5>...</h5>
<label>...</label>
<h5>... ...</h5>
<label class="icon-redes-refa" style="border:0px">
<a href="..." target="_blank">
<span class="...-..."></span>
</a>
<a href="https://.../." target="_blank">
<span class=".-.."></span>
</a>
<a href="h..." target="_blank">
<span class=".-...."></span>
</a>
<a href="https://www...../.../" target="_blank">
<span class=".-..."></span>
</a>
<a href="https://www...com/.../..." target="_blank">
<span class=".-...."></span>
</a>
</label>
</div>
<div class="modal-footer" style="border-top-width: 0px!important">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#exampleModalCenter button').on('click', function() {
$('.modal').modal('hide');
});
});
</script>
代码