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默认验证，我必须按“提交”按钮，但我不想这样做。当鼠标离开第一个输入并转到另一个输入时，我想要它，然后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

 });

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

1 个答案: