Validate fields with html 5 and mvc 5

Question

As I validate fields in CSHTML itself, when I click the button, it validates the fields and if there are fields not filled it remains on the page, displaying a message. See the example fields and button to validate.

<div class="form-group">
    <div class="grid_4">
        <label>Nome</label>
    </div>
    <div class="grid_14">
        <input type="text" name="txtNome" class="grid_14 required" placeholder="Nome completo" required />
    </div>
</div>
<div class="form-group">
    <div class="grid_4">
        <label>Email</label>
    </div>
    <div class="grid_7">
        <input type="email" name="txtEmail" class="grid_6  required" placeholder="Email válido" required />
    </div>
    <div class="grid_2">
        <label>CPF</label>
    </div>
    <div class="grid_5">
        <input type="number" name="txtCpf" class="grid_5  required" placeholder="99999999999" required />
    </div>
</div>

//Botão

<div class="grid_17">
    <button value="novaPesquisa" class="btn-pular-passo pull-right">Continuar</button>
</div>

Answer 1

In the Asp.net-mvc, validation is done by decorating the properties of your Model with the appropriate attributes.

Examples:

• [Required]: Makes the completion property mandatory.
• [StringLength(60)]: Makes the property String not more than 60 characters.

In order for the validations to work properly, you need to use the following code in Razor right after the <input> of your property:

@Html.ValidationMessageFor(model => model.SuaProperty)

Answer 2

What do you not want is the Microsoft jQuery Unobtrusive Validation library? Add it via Nuget.

Enable on web.config and test.

In web.config it is this property that needs to enable:

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

I even tried here too, but at the time of installing it gave error of incompatibility with jQuery. Even uninstalling jQuery and installing it, leaving then it solves the jQuery dependency, still gave problem.

So, if problem remove jQuery, first install jQuery Validation and then install Microoft jQuery Unobtrusive Validation.

This here for me solved the incompatibility.

EDITION

Don’t forget to add the jQuery Validation plugins to the View. To follow the pattern you need to add them in Bundleconfig.Cs inside the App_start folder.

bundles.Add(new ScriptBundle("~/js/jqueryval").Include(
    "~/Scripts/jquery.validate.*"));

And then add in the view the call to these scripts:

@Scripts.Render("~/js/jqueryval")

Done this has to work.