Reputation: 61
I have two date values, that I need to validate. This validaton is compound: One date needs to be sooner than the other (think StartingDate and FinishDate).
How can I validate for this?
Based on this post, which seems to pose a similar situation, one recomendation is to use MVC Foolproof Validation. Is this still the best option? Is there other way to validate such task?
My code in the view, if it helps:
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-5">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<span style="font-size:large;">Início </span>
</div>
<div class="col-md-7">
@Html.EditorFor(model => model.Inicio, new { htmlAttributes = new { @class = "form-control datetimepicker" } })
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-5">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<span style="font-size:large;">Fim </span>
</div>
<div class="col-md-7">
@Html.EditorFor(model => model.Fim, new { htmlAttributes = new { @class = "form-control datetimepicker" } })
</div>
</div>
</div>
</div>
<script>
<!--jQuery DateTimePicker-->
jQuery('.datetimepicker').datetimepicker({
format: 'd/m/Y H:i'
});
</script>
Upvotes: 0
Views: 1369
Reputation: 61
Based on BviLLe_Kid answer, which I accept, here's what I ended up doing:
if (ModelState.IsValid)
{
if (nameofViewModel.FinishDate <= nameofViewModel.StartDate)
{
ModelState.AddModelError(string.Empty, "Error message here");
return View(nameofViewModel);
}
else {
//code for when validation is OK
}
}
In the view:
<div style="color:red;">
@Html.ValidationSummary(true)
@Html.ValidationMessageFor(model => model.FinishDate)
</div>
Upvotes: 0
Reputation: 5943
I don't see why a simple JS solution can't help here, so here it is:
HTML:
<p>Start Date: <input type="text" id="datepicker1"></p>
<p>End Date: <input type="text" id="datepicker2"></p>
<button id="TestCondition">
Click Me!
</button>
JS:
$(function() {
$("#datepicker1").datepicker();
});
$(function() {
$("#datepicker2").datepicker();
});
$("#TestCondition").click(function(){
alert($("#datepicker1").val());
alert($("#datepicker2").val());
if($("#datepicker2").val() < $("#datepicker1").val()){
alert("End Date must come after Start Date!");
}
});
Here is a fiddle for that: JSFiddle
Alternate Solution using Controller in MVC
Once you submit this page to the controller, you can do a check like so (C#):
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult NameOfAction(ViewModel nameOfViewModel)
{
if(nameofViewModel.FinishDate <= nameofViewModel.StartDate)
{
ModelState.AddModelError("FinishDate", "Finish Date needs to be after the Start Date!");
return View(nameOfViewModel);
}
}
Let me know if this helps, or if anything needs to be changed.
Upvotes: 2