CPF Mask and Date of Birth Asp.net MVC

Question

My question is this: I created a simple CRUD and I want to use mask in the fields date of birth, CPF and phone.

Function code create of the CRUD:

@model WebApplication1.Models.Bdfinal
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Bdfinal</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Sobrenome, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Sobrenome, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Sobrenome, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Telefone, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Telefone, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Telefone, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DataNascimento, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DataNascimento, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DataNascimento, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.CPF, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CPF, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CPF, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Sexo, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Sexo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Sexo, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

You can use a mask library on jQuery created by the Brazilian Igor Escobar. It is possible to create almost any type of mask with the library.

https://igorescobar.github.io/jQuery-Mask-Plugin/

Documentation

https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html

1. Downloading and adding the plugin to your project

In the link above, you will find a link to download the library. After downloading it, add it to your project. For this, inside the wwwroot of your project, create a folder called lib (if it does not exist) and inside it put the folder you just downloaded.

2. Referencing the library

After adding the library to the project, we have to reference it so we can use it later. Inside the layout file of your website or on the page you want to use the mask, inside the tag <body> and almost in the closing of the same, add the following line:

<script src="~/lib/jquery-mask-plugin/src/jquery.mask.js" type="text/javascript" asp-append-version="true"></script>

3. Using

In a CPF field for example, it will look like this.

Html code:

<div class="col-md-2">
     <div class="form-group form-group-default required">
          <label>CPF</label>
          <input id="txtCPF" asp-for="CPF" class="form-control" style="height: 39px" />
     </div>
 </div>

In the scripting area of your page:

$('#txtCPF').mask('000.000.000-00', { placeholder: "___.___.___-__" });

In the documentation link, you check all possible masks.

Answer 2

Using masks is always a good way because it facilitates the filling out of the form and assists the user in the correct filling out of the data. Usually masks are applied via Avascripts, because the direct execution in Rower makes the answer faster, without sending to the data server.

Jquery is a good alternative

Telephone

  jQuery("input.telefone")
            .mask("(99) 9999-9999?9")
            .focusout(function (event) {  
                var target, phone, element;  
                target = (event.currentTarget) ? event.currentTarget : event.srcElement;  
                phone = target.value.replace(/\D/g, '');
                element = $(target);  
                element.unmask();  
                if(phone.length > 10) {  
                    element.mask("(99) 99999-999?9");  
                } else {  
                    element.mask("(99) 9999-9999?9");  
                }  
            });

Add the plugin:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>

Cpf

<script>
    $(document).ready(function () { 
        var $seuCampoCpf = $("#CPF");
        $seuCampoCpf.mask('000.000.000-00', {reverse: true});
    });
</script>

Add also the plugin:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>

Date of Birth

$("#campoData").mask("99/99/9999");

Source: http://vinteum.com/jquery-mask-mascaras-para-campos-html-utilizando-jquery/