当我从一个输入转到另一个输入时，不会出现HTML5默认验证

Question

我有一个ASP.NET MVC项目，在一个视图页面中，我有以下标记：

<form class="form-horizontal" action="~/Home/EnterMobileNumber" method="Post" id="registration">
    <div id="middle-wizard">

        <div class="step">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <div style="margin-right: 100px; margin-left: 100px">

                            <div class="form-group" align="right">
                                <input type="tel" name="Mobile" id="Mobile" class="form-control" required pattern="[0]{1}[9-9]{1}[0-9]{9}"
                                       oninvalid="InvalidMsg(this);" title="Please enter valid mobile number" placeholder="mobile number">
                                @Html.ValidationMessageFor(model => model.Mobile, "", new { @class = "text-danger" })
                            </div>
                            <div class="form-group" align="right">
                                <input type="text" name="firstname" id="firstname" class="form-control" required  placeholder="firstname">
                                @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="make wow shake" data-wow-duration="1s" data-wow-delay=".5s" align="center">

            <div class="control-group">
                <div class="controls">
                    <input type="submit" class="btn btn-warning" value="register" />
                </div>
            </div>
        </div>

        <div class="clearfix"> </div>
    </div>

</form>

在这个视图中有如下jquery代码：

 @section Scripts
                                               {
    <script>
           function InvalidMsg(textbox) {
            if (textbox.value === '') {
                textbox.setCustomValidity('Please enter mobile number');
            } else if (textbox.validity.typeMismatch) {
                textbox.setCustomValidity('Please enter valid mobile number');
            } else {
                textbox.setCustomValidity('');
            }

            return true;
        }
   </script>
}

为了显示HTML5默认验证，我必须按下submit按钮，但我不想这样做。我希望当鼠标离开第一个输入并转到另一个输入时，HTML5默认验证出现在其默认框架中(类似于弹出窗口)，如下图所示：

​

​

任何帮助都将不胜感激！

Answer 1

您必须初始化onfocusout或onfocusin的设置，才能让验证像这样触发：

$('#myFormId').validate({
    onfocusout: function (element) {
       $(element).valid();
 },
 onfoucsin: false //this will disable in. If you want to enable it just set up the function

 });