Validating date with Jquery

Question

Validating date with Jquery

Navigation

#1 by (2 votes)

-1

How to do date validation from EditorFor using jquery? wanted to check if the date entered by the user, and if the date he entered is greater than the current date, display a message to him stating the error

<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 data" } })
        @Html.ValidationMessageFor(model => model.DataNascimento, "", new { @class = "text-danger" })
    </div>
</div>

I thought of doing a jquery that takes the typed content and checks the date. Can anyone help me?

With the help of @LucasDeFreitasKauer this script was done:

$("#DataDeNascimento").on("blur", validarDataDeNascimento);
var validarDataDeNascimento = function () {
    var dataDeNascimentoStr = $("#DataDeNascimento").val();
    var dataDeNascimento = new Date(dataDeNascimentoStr);
    var agora = new Date();
    if (dataDeNascimento > agora) {
        alert("A data de nascimento não pode ser uma data futura.");
    }
};

and was added to the EditorFor the ID id="BirthDate" but when it loses focus it does not display any alerts.

jquery asp.net-mvc-5

asked by anonymous 13.11.2016 / 19:07

1 answer

Problems with ASP.NET MVC Access to variables in another class [closed]

score 2 · Accepted Answer

First you'll need to add id to the date field:

@Html.EditorFor(model => model.DataNascimento, new { htmlAttributes = new { @class = "form-control data", id = "DataDeNascimento" } })

Then you can do the validation as follows:

$("#DataDeNascimento").on("change", validarDataDeNascimento);

var validarDataDeNascimento = function () { 
    var dataDeNascimentoStr = $("#DataDeNascimento").val();
    var dataDeNascimento = new Date(dataDeNascimentoStr);
    var agora = new Date();

    if (dataDeNascimento > agora) {
        alert("A data de nascimento não pode ser uma data futura.");
    }   
};

Updated

Can be done in onBlur as well. For this, it will be necessary to change $("#DataDeNascimento").on("change", validarDataDeNascimento); by $("#DataDeNascimento").on("blur", validarDataDeNascimento);