使用onsubmit

时间:2018-11-08 18:13:16

标签: javascript twitter-bootstrap forms validation

我有一个modal,在此模式中我有一个form,当我填写此表单并单击“发送”时,会自动显示另一个模式,说“谢谢”,但是,如果我让表单为空,然后我发送,表单显示“您需要填写此字段”,上方显示模式句“谢谢” ...结论是,

我希望首先验证表单,然后在所有表单填写完毕后显示模式:“谢谢”,bootstraponsubmit选项,¿我可以用它来验证模式吗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>

代码

0 个答案:

没有答案