Remover máscara de um @Html.EditorFor antes de chegar ao Controller Edit

Question

Prezados, boa noite.

No desenvolvimento de uma aplicação possuo um EditorFor para CNPJ que utiliza o seguinte código Jquery abaixo para formatá-lo:

        <script>
                jQuery(function ($) {
                    $("#CNPJ").mask("99.999.999/9999-99");
                    $("#CEP").mask("99999-999");
                    $("#Telefone").mask("(99)9999-9999");
                });
        </script>

A propriedade CNPJ no model tem os seguintes Data Annotations:

[Display(Name = "CNPJ")]
        [MaxLength(14)]
        [Required(ErrorMessage = "Campo obrigatório, preencha-o.")]
        public string CNPJ { get; set; }

Na action EDIT possuo a validação para verificar se o ModelState é válido. Porém o mesmo nunca é válido, pois ao realizar o POST o CNPJ está vindo com os caracteres da máscara. Possuo a máscara na view de edição para que o campo apareça formatado. Mas preciso encontrar uma maneira de fazer com que, ao realizar o post do formulário, seja retirada a máscara do CNPJ.

Como proceder?

Pensei que o correto seria uma função Javascript ou Jquery para desmascarar o campo, mas não consegui fazer tal função. Tentei via código no controller utilizando o string.Replace, pois na view Create eu tenho este recurso e funciona corretamente, mas no EDIT não consigo pois não passa pelo ModelState.

Answer 1

Daniel, 

No evento submit (javascript/jQuery) você pode remover os caracteres da máscara. Ex:

$( "#Id_Do_Form" ).submit(function( event ) {
  $('#ControleCNPJ').val($('#ControleCNPJ').val().replace('.','').replace('/','').replace('-',''));
});

Ou usando RegEx:

$( "#Id_Do_Form" ).submit(function( event ) {
  $('#ControleCNPJ').val($('#ControleCNPJ').val().replace(/[^\d]+/g,''));
});

---

If you found this post helpful, please "Vote as Helpful". If it actually answered your question, remember to "Mark as Answer".

Se achou este post útil, por favor clique em "Votar como útil". Se por acaso respondeu sua dúvida, lembre de "Marcar como Resposta".

Answer 2

Para interceptar um valor a ser enviado via POST de um formulário você pode submeter o formulário usando Ajax. Veja o código abaixo:

HTML

<form method="post" action="/echo/json">

<input type="text" id="cnpj" name="cnpj" value="66.673.557/0001-00" />

<input type="submit" value="Enviar"/>

</form>

JAVASCRIPT

$("form").submit(function (e){


	e.preventDefault();
  
  var formData = {};
  formData.cnpj = $('#cnpj').val().replace(/[^\d]+/g, '');

	$.ajax({
       type: "POST",
       url: $("form").attr("action"),
       data: formData, 
       success: function(data)
       {
           alert(JSON.stringify(data)); 
       }
   });

});

Você pode ver um exemplo em https://jsfiddle.net/tf7g1rnu/1/

Answer 3

Boa noite, Juliano.

Obrigado pela ajuda, mas ainda sem sucesso. Veja no código completo abaixo, talvez seja mais fácil para me apoiar:

@model Gcondominio.Models.Condominios.Condominio
@{
    Layout = "~/Views/Shared/_AdminTemplate.cshtml";
    ViewBag.Title = "Alterando os dados de um Condomínio";
}
@using (Html.BeginForm(new {id = "form"}))
{
    @Html.AntiForgeryToken()
    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <ol class="breadcrumb">
                        <li class="active">
                            <i class="fa fa-bar-chart-o"></i>Condomínio
                        </li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        Relação de Condomínios registrados
                    </div>
                    <div class="form-horizontal">
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        @Html.HiddenFor(model => model.CondominioId)

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

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

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

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

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

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

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

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

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

                        <div class="form-group">
                            @Html.LabelFor(model => model.CNPJ, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.CNPJ, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.CNPJ, "", 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.DataEntrega, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.DataEntrega, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.DataEntrega, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer panel-info">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Gravar alterações" class="btn btn-info"/>
                            @Html.ActionLink("Retornar para a listagem de Condomínios", "Index", null, new { @class = "btn btn-warning" })
                        </div>
                        <br />
                        <br />
                    </div>
                </div>
            </div>
        </div>
    </div>
    @section ScriptPage
        {
        <script>
                jQuery(function ($) {
                    $("#CNPJ").mask("99.999.999/9999-99");
                });
        </script>

        <script type="text/javascript">
            $("#form").submit(function (event) {
                $('#CNPJ').val($('#CNPJ').val().replace('.', '').replace('/', '').replace('-', ''));
            });
        </script>
    }
}

Se conseguir me dar mais uma ajuda, obrigado.

Answer 4

Boa noite, John.

Obrigado pela ajuda, mas ainda sem sucesso, ao clicar no botão "Gravar alterações" agora nada acontece, não há postagem. Veja o código abaixo, será que existe algo que faltou eu fazer?

@model Gcondominio.Models.Condominios.Condominio
@{
    Layout = "~/Views/Shared/_AdminTemplate.cshtml";
    ViewBag.Title = "Alterando os dados de um Condomínio";
}
@using (Html.BeginForm(new {id = "form"}))
{
    @Html.AntiForgeryToken()
    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <ol class="breadcrumb">
                        <li class="active">
                            <i class="fa fa-bar-chart-o"></i>Condomínio
                        </li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        Relação de Condomínios registrados
                    </div>
                    <div class="form-horizontal">
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        @Html.HiddenFor(model => model.CondominioId)

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

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

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

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

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

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

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

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

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

                        <div class="form-group">
                            @Html.LabelFor(model => model.CNPJ, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.CNPJ, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.CNPJ, "", 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.DataEntrega, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.DataEntrega, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.DataEntrega, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer panel-info">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Gravar alterações" class="btn btn-info"/>
                            @Html.ActionLink("Retornar para a listagem de Condomínios", "Index", null, new { @class = "btn btn-warning" })
                        </div>
                        <br />
                        <br />
                    </div>
                </div>
            </div>
        </div>
    </div>
    @section ScriptPage
        {
        <script>
                jQuery(function ($) {
                    $("#CNPJ").mask("99.999.999/9999-99");
                    $("#CEP").mask("99999-999");
                    $("#Telefone").mask("(99)9999-9999");
                });
        </script>

        <script>
            $("form").submit(function (e) {
                e.preventDefault();

                var formData = {};
                formData.CNPJ = $('#CNPJ').val().replace(/[^\d]+/g, '');
                $.ajax({
                    type: "POST",
                    url: $("form").attr("action"),
                    data: formData,
                    success: function (data) {
                        alert(JSON.stringify(data));
                    }
                });
            });
        </script>
    }
}

Fico no aguardo e, desde já, obrigado pelo apoio.

Answer 5

Pessoal, boa tarde.

Obrigado a todos pelo apoio. Consegui resolver conforme função abaixo:

        <script type="text/javascript">
            function RemoveMaskAndSubmit() {
                $('#CNPJ').val($('#CNPJ').val().replace('.', '').replace('.', '').replace('/', '').replace('-', ''));
                $("#CEP").val($('#CEP').val().replace('-', ''));
                $("#Telefone").val($('#Telefone').val().replace('(', '').replace(')', '').replace('-', ''));
                $('#formId').submit();
            }
        </script>

Segue código completo:

@model Gcondominio.Models.Condominios.Condominio
@{
    Layout = "~/Views/Shared/_AdminTemplate.cshtml";
    ViewBag.Title = "Alterando os dados de um Condomínio";
}
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div id="page-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <ol class="breadcrumb">
                        <li class="active">
                            <i class="fa fa-bar-chart-o"></i>Condomínio
                        </li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        Relação de Condomínios registrados
                    </div>
                    <div class="form-horizontal">
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        @Html.HiddenFor(model => model.CondominioId)

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

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

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

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

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

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

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

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

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

                        <div class="form-group">
                            @Html.LabelFor(model => model.CNPJ, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.CNPJ, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.CNPJ, "", 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.DataEntrega, htmlAttributes: new { @class = "control-label col-md-2" })
                            <div class="col-md-10">
                                @Html.EditorFor(model => model.DataEntrega, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.DataEntrega, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer panel-info">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Gravar alterações" class="btn btn-info" onclick="RemoveMaskAndSubmit()" />
                            @Html.ActionLink("Retornar para a listagem de Condomínios", "Index", null, new { @class = "btn btn-warning" })
                        </div>
                        <br />
                        <br />
                    </div>
                </div>
            </div>
        </div>
    </div>
    @section ScriptPage
        {
        <script>
            jQuery(function ($) {
                $("#CNPJ").mask("99.999.999/9999-99");
                $("#CEP").mask("99999-999");
                $("#Telefone").mask("(99)9999-9999");
            });
        </script>

        <script type="text/javascript">
            function RemoveMaskAndSubmit() {
                $('#CNPJ').val($('#CNPJ').val().replace('.', '').replace('.', '').replace('/', '').replace('-', ''));
                $("#CEP").val($('#CEP').val().replace('-', ''));
                $("#Telefone").val($('#Telefone').val().replace('(', '').replace(')', '').replace('-', ''));
                $('#formId').submit();
            }
        </script>
    }
}
}