HTML5 default validation don't be appeared when I go from one input to another input

Question

I have an ASP.NET MVC project and in one view page I have below tags:

<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>

and there is jquery code in this view as below:

 @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>
}

Here for showing HTML5 default validation I must press submit button and I do not want to do this. I want it when mouse leaves first input and goes to another input then the HTML5 default validation gets appeared in its default frame(that is like a popup) like this picture:

Any help will be appreciated!

Possible duplicate of [How to force a html5 form validation without submitting it via jQuery](https://stackoverflow.com/questions/11866910/how-to-force-a-html5-form-validation-without-submitting-it-via-jquery) — Nico Haase, Sep 09 '19 at 11:57
No, I need the HTML5 default validation that gets appeared like popup in a messagebox — Mostafa, Sep 09 '19 at 12:28

score 0 · Answer 1 · answered Sep 09 '19 at 11:57

0

You have to initialize the settings for onfocusout or onfocusin to get the validation to fire like so:

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

 });

answered Sep 09 '19 at 11:57

user10728126

151
4

No, I need the HTML5 default validation that gets appeared like popup in a messagebox – Mostafa Sep 09 '19 at 12:29
add the message to a javascript alert box – user10728126 Sep 09 '19 at 12:45
How can I do this? I edited my question and please see the picture that I sent. – Mostafa Sep 09 '19 at 12:48
Purchase third-party controls like Telerik! Personally, I wouldn't waste time trying to do it yourself. – user10728126 Sep 09 '19 at 13:06

HTML5 default validation don't be appeared when I go from one input to another input

1 Answers1