[JS] Form表單提交時：即便用原生html5驗證，又使用ajax提交數據

沒事都是沒法理解Form的原理，不喜歡自動提交數據。可是又喜歡html5 原生對於input（特殊類型）的判斷，

因此須要能夠找到點擊button (type=submit)時，能夠作到：

1. html5 自帶表單驗證
2. 使用ajax提交數據，由於後臺返回是Json

 

HTML 代碼部分：

使用了Bootstrap 4.2 

<form id="login_form">
                    <div class="form-group row">
                        <label for="login_email" class="col-sm-4 col-form-label">*Email</label>
                        <div class="col-sm-8">
                            <input type="email" class="form-control" id="login_email" aria-describedby="emailHelp"
                                   placeholder="username@aaa.com">
                        </div>

                    </div>
                    <div class="form-group row">
                        <label for="login_password" class="col-sm-4 col-form-label">*Password</label>
                        <div class="col-sm-8">
                            <input type="password" class="form-control" id="login_password" placeholder="Password">
                        </div>
                    </div>

                    <!--Error Msg Part-->
                    <div id="login_error_msg" class="alert alert-danger" role="alert"></div>

                    <div class="row">
                        <div class="col-sm-4 offset-sm-9">
                            <button type="submit" class="btn btn-primary">
                                 <i class="fas fa-sign-in-alt"></i> 登錄
                            </button>
                        </div>
                    </div>
                </form>

View Code

 

JS 代碼部分：

$("#login_form").on('submit', function (ev) {
            // html5 原生 validation
            ev.preventDefault();

            // POST data,本身Ajax
            var data = {
                'email': $("#login_email").val().trim(),
                'password': $("#login_password").val().trim(),
            };

            //$("#login_main").mask("認證中...");
            $.ajax({
                type: "POST",
                url: "/login/",
                data: data,
                dataType: 'json',
                success: function (result) {
                    // do something 
                },
                complete: function () {
                    // $("#login_main").unmask("認證中...");
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status + " >>> " + textStatus + "\n" + XMLHttpRequest.responseText);
                },
            });
        })

 

 

完美的解決了個人需求～～JS部分仍是不是很熟，也是從別人那裏找到的代碼。。有時間搞懂爲啥這麼寫～～～