0

I try to develope MVC 5 web application in .Net Framework. I try to mask input on form .

How to make a similar mask for a phone number?

enter image description here

The code below does not work

<script src="~/Scripts/jquery.inputmask/jquery.inputmask.bundle.js">
</script>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script>
  $('#phone').mask("+7(999)999-99-99");
</script>


<div class="form-group">
   <div class="col-md-10">
      <span style="font-weight: bold;">Phone:</span>
      @Html.EditorFor(model => model.Phoneord, new { htmlAttributes = new { @class = "form-control", @id = "phone" } })
      @Html.ValidationMessageFor(model => model.Phoneord, "", new { @class = "text-danger" })
   </div>
</div>
unnamed
  • 113
  • 1
  • 8

1 Answers1

1

By mentioning inputmask plugin (from jquery.inputmask.bundle.js referenced in your code), first you need to include all required dependencies as given in documentation there:

Inputmask 3.x Documentation

Therefore, set the script order like this:

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.inputmask/jquery.inputmask.bundle.js"></script> 

From my experiments about this plugin, the EditorFor doesn't worked properly with it, hence you need to convert EditorFor to TextBoxFor:

@Html.TextBoxFor(model => model.Phoneord, new { @class = "form-control", @id = "phone" })

Then, activate masked input using lines below:

$(document).ready(function () {
    $('#phone').inputmask("+7(999)999-99-99");
}

Note that if you encountered $(...).mask is not a function error in browser console, probably you must change mask to inputmask.

NB: If you intended to use maskedInput plugin instead (by mentioning mask() method on your code), change the script to this:

<script src="~/Scripts/jquery.maskedinput.js"></script> 

And then keep masking method as is:

$(document).ready(function ($) {
   $('#phone').mask("+7(999)999-99-99");
});

See .NET Fiddle example to see usage of both plugins.

Related issues:

Jquery.inputmask not working

Phone mask with jQuery and Masked Input Plugin

Community
  • 1
  • 1
Tetsuya Yamamoto
  • 24,297
  • 8
  • 39
  • 61