Question

在所有modal填写完毕后，我使用下面的代码显示表单required attribute，但是在我的情况下，它显示模式信息，但不验证表单。

代码

$(function () {
            $("#btn_submit").click(function () {
                if ($("#first").val() !== "" && $("#email").val() !== "") {
                    $('#myModal').modal('show');
                    $(this).closest("form").submit();
                }
            });
        });

在所有required输入都填满后，如何显示模态。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test-Projekt</title>
        <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=10">
        <link href="favicon.ico" rel="Shortcut icon">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">
    </head>
    <body>
        <form action="" method="GET">
            <input type="text" name="first"  id="first" required><br><br>
            <input type="text" name="last" id="last"><br><br>
            <input type="text" name="email" id="email" required><br><br>
            <input id="btn_submit" type="submit" name="submit" data-toggle="modal" data-target="#myModal">

        </form>
        <div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="progress progress-striped active">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                <span>Uploading Data<span class="dotdotdot"></span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>

        $(function () {
            $("#btn_submit").click(function () {
                if ($("#first").val() !== "" && $("#email").val() !== "") {
                    $('#myModal').modal('show');
                    $(this).closest("form").submit();
                }
            });
        });</script>
</html>

仅在所有必填属性均已填写并提交表单后

0 个答案: