html5表單提交oninvalid

<form action="#" method="post" autocomplete="on" id="myform">
                            <div class="form-group">

                                <input type="text" class="form-control" placeholder="手機號" name="UserName" id="UserName" maxlength="11" pattern="^1[0-9]{10}$" required oninvalid="this.setCustomValidity('請輸入正確的號碼');" oninput="setCustomValidity('')">
                            </div>
                            <div class="form-group">
                                <input  class="form-control" name="Password" id="Password" type="password" placeholder="6~20位" class="" pattern="^[a-zA-Z0-9]\w{5,19}$" required oninvalid="this.setCustomValidity('6~20字母數字或下劃線');" oninput="setCustomValidity('')" onchange="checkPassword()">
                            </div>

                            <div class="checkbox">

                                <p class="pull-right" style="color:red;display: none">*用戶名或密碼錯誤</p>
                            </div>
                            <button type="submit" class="btn btn-primary">登陸</button>

                        </form>

$("#myform").on("submit", function(ev) {
     //阻止submit表單提交
     ev.preventDefault();
 })