CPF Mask and Birth Date Asp.net MVC

Question

CPF Mask and Birth Date Asp.net MVC

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

My question is this: I created a simple CRUD and I am wanting to use masks in the fields of birth date, CPF and telephone.

Functioncode%ofCRUD%:

@modelWebApplication1.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")
}

c# asp.net asp.net-mvc

asked by anonymous 09.10.2017 / 03:49

2 answers

0

Using masks is always a good thing because it facilitates the filling of the form and assists the user in the correct completion of the data. Normally, masks are applied via javascripts, since the execution directly in the brower leaves the answer faster, without needing to send to the data server.

Jquery is a good alternative

Phone

  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><scriptsrc="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 the plugin as well:

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

DateofBirth

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

Source: link

09.10.2017 / 14:05

Universal Music Player with Web Services VueJS Menu Collapse

score 1 · Accepted Answer

You can use a mask library in jQuery created by the Brazilian Igor Escobar. You can create just about any type of mask with the library.

link

Documentation

link

1. Downloading and adding the plugin in your project

In the above link, you will find a download link from the library. After you download it, add the same in your project. To do this, within your wwwroot folder of your project, create a folder called lib (if it does not already exist) and place the folder you just downloaded.

2.Referencingthelibrary

Afteraddingthelibrarytotheproject,wehavetoreferenceitsothatwecanuseitlater.Withinthelayoutfileofyoursiteorthepageyouwanttousethemask,withinthe<body>tagandalmosttheclosingtagofthesame,addthefollowingline:

<scriptsrc="~/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 scripts area of your page:

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

In the informed documentation link, you check all possible masks.