Cause form validation on an Asp.net link mvc 5

Asked

Viewed 659 times

2

Good afternoon, everyone!

I have a form, I created the rules using Datanotations and it works great when I use a button or input type Submit within my form.

Validates very well!

I want to exchange this button for a link that will make the ajax call of a function of my web api, but the link does not cause validation :(

Does anyone know how to force a link to cause validation?

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.ComponentModel.DataAnnotations;

    namespace Framework.DTO {
        public class DadosAlteracaoSenha : BaseDTO {
            public string IdUsuario { get; set; }

            [Display(Name = "Username")]
            [Required(ErrorMessage = "Username deve ser informado.", AllowEmptyStrings = false)]
            [StringLength(50, MinimumLength = 4, ErrorMessage = "Username deve ter entre 4 à 50 caractéres.")]
            public string Username { get; set; }

            [Display(Name = "Senha Atual")]
            [Required(ErrorMessage = "Senha atual deve ser informada.", AllowEmptyStrings = false)]
            [StringLength(8, MinimumLength = 6, ErrorMessage = "Senha atual deve ter entre 6 à 8 caractéres.")]
            public string Senha { get; set; }

            [Display(Name = "Nova Senha")]
            [Required(ErrorMessage = "Nova senha deve ser informada.", AllowEmptyStrings = false)]
            [StringLength(8, MinimumLength = 6, ErrorMessage = "Nova senha deve ter entre 6 à 8 caractéres.")]
            public string NovaSenha { get; set; }

            [Display(Name = "Confirmação de Senha")]
            [Required(ErrorMessage = "Redigite sua nova senha para confirmação.", AllowEmptyStrings = false)]
            [CompareAttribute("NovaSenha", ErrorMessage = "Nova senha não é igual no campo de confirmação.")]
            public string ConfirmacaoNovaSenha { get; set; }
        }
    }

VIEW

            @model Framework.DTO.DadosAlteracaoSenha
            @{
                ViewBag.Title = "Alterar minha senha";
            }

            <div class="row">
                <div class="col-md-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-success pull-right"></span>
                            <h5>Alterar minha senha</h5>
                        </div>
                        <div class="ibox-content">

                            <div class="row">
                                <div class="col-lg-12">
                                    @using (Html.BeginForm("alterarSenha", "app", new { id = "frmAlterarSenha", @class = "form-horizontal" }, FormMethod.Post)) {
                                        @Html.AntiForgeryToken()
                                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                        <table border="0" style="width:100%">
                                            <tr>
                                                <td>
                                                    @Html.LabelFor(model => model.Username, htmlAttributes: new { @class = "col-lg-2 control-label" })
                                                    <div class="col-lg-9">
                                                        @Html.EditorFor(model => model.Username, new { htmlAttributes = new { @class = "form-control input-sm required", @maxlength = "8", @disabled = "true" } })
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    @Html.LabelFor(model => model.Senha, htmlAttributes: new { @class = "control-label col-md-2" })
                                                    <div class="col-lg-9">
                                                        @Html.EditorFor(model => model.Senha, new { htmlAttributes = new { @class = "form-control input-sm required", @maxlength = "8" } })
                                                        @Html.ValidationMessageFor(model => model.Senha, "", new { @class = "text-danger" })
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    @Html.LabelFor(model => model.NovaSenha, htmlAttributes: new { @class = "control-label col-md-2" })
                                                    <div class="col-lg-9">
                                                        @Html.EditorFor(model => model.NovaSenha, new { htmlAttributes = new { @class = "form-control input-sm required", @maxlength = "8" } })
                                                        @Html.ValidationMessageFor(model => model.NovaSenha, "", new { @class = "text-danger" })
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    @Html.LabelFor(model => model.ConfirmacaoNovaSenha, htmlAttributes: new { @class = "control-label col-md-2" })
                                                    <div class="col-lg-9">
                                                        @Html.EditorFor(model => model.ConfirmacaoNovaSenha, new { htmlAttributes = new { @class = "form-control input-sm required", @maxlength = "8" } })
                                                        @Html.ValidationMessageFor(model => model.ConfirmacaoNovaSenha, "", new { @class = "text-danger" })
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                        <button >asaSA</button>
                                        <a id="lnkGravarPerfil" onclick="" href="javascript:void(0);" class="btn btn-primary">
                                            <img id="imgBtnLoading" src='@Url.Content("~/content/images/ajax-loader.gif")' class="img-btn-ajax-loading" style="display:none;">Gravar
                                        </a>
                                    }
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

1 answer

2

Using jQuery Validation, you can do it in two ways:

.validate()

$("form").validate()

.valid()

if ($('form').valid())
{
   // Coloque sua lógica aqui
}

Make the button call one of them.

  • I have actually just discovered that the validation is by unobstrusive https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

  • The problem is that it doesn’t work when you exchange input button for an ajax call link

  • @Fabioluisrodrigues I did not understand the purpose of the link.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.