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();
 })