Trying to force remote validation

Question

Using remote validation to compare a start and end time from a model.

All worked OK but found a little bug.

If start time was incorrectly set to say 11am, end time was entered to be 10am, end time was flag error that it is before the start time. So if I change start time to 9am, while it is correct, end time is still showing the error as it has not been re-evaluated upon changing the start time. Could simply click end time and tab off, however end users will complain.

So tried to force the validation again based on some other posts but can't get it working. Model

public bool MondayTrue { get; set; }
    [DataType(DataType.Time, ErrorMessage = "Incorrect time")]             
    [RequiredIfTrue("MondayTrue", ErrorMessage ="Day has been marked as working")]
    [DisplayName("Start")]
    [Remote("MondayTime", "Remote", AdditionalFields = "MondayEnd", HttpMethod = "POST", ErrorMessage = " * Must be before End time")]
    public DateTime? MondayStart { get; set; }
    [DataType(DataType.Time, ErrorMessage = "Incorrect time")]
    [RequiredIfTrue("MondayTrue", ErrorMessage = "Day has been marked as working")]
    [Remote("MondayTime", "Remote", AdditionalFields = "MondayStart", HttpMethod = "POST", ErrorMessage = " * Must be after Start time")]
    [DisplayName("End")]
    public DateTime? MondayEnd { get; set; }
    public bool TuesdayTrue { get; set; }
    [DataType(DataType.Time, ErrorMessage = "Incorrect time")]
    [RequiredIfTrue("TuesdayTrue", ErrorMessage = "Day has been marked as working")]
    [DisplayName("Start")]

start of view:

@using (Html.BeginForm(null, null, FormMethod.Post, new { name = "myForm", id = "myForm" }))
{

start and end time razor code:

 <div style="display: table-row;">
                    <div style="display: table-cell;", class="tCell">Monday</div>
                    <div style="display: table-cell;", class="tCell">@Html.CheckBoxFor(model => model.MondayTrue, new { id = "txtMondayTrue" })</div>                      
                </div>                
                <div style="display: table-row;">
                    <div style="display: table-cell;", class="tCell">@Html.LabelFor(model => model.MondayStart)</div>
                    <div style="display: table-cell;", class="tCell">
                        <div>@Html.EditorFor(model => model.MondayStart, new { htmlAttributes = new { id = "MondayStart", disabled = "disabled" } }) </div>
                        <div>@Html.ValidationMessageFor(model => model.MondayStart, "", new { @class = "text-danger", id = "MondayStartError" }) </div>
                    </div>
                    <div style="display: table-cell;" , class="tCell">@Html.LabelFor(model => model.MondayEnd)</div>
                    <div style="display: table-cell;" , class="tCell">
                        <div>@Html.EditorFor(model => model.MondayEnd, new { htmlAttributes = new { id = "MondayEnd", disabled = "disabled" } }) </div>
                        <div>@Html.ValidationMessageFor(model => model.MondayEnd, "", new { @class = "text-danger", id = "MondayEndError" }) </div>
                    </div>
                </div>

Jquery where I thought I was forcing it to re-check

<script>
    $("#txtMondayTrue").click(function (event) {
        if ($(this).is(":checked")) {
            $('#MondayStart').prop("disabled", false).val("");
            $('#MondayEnd').prop("disabled", false).val("");
            $('#MondayStartError').show();
            $('#MondayEndError').show();
        }
        else {
            $('#MondayStart').prop("disabled", true).val("");
            $('#MondayEnd').prop("disabled", true).val("");
            $('#MondayStartError').hide();
            $('#MondayEndError').hide();
        }
    });
</script>
<script>
    $('#MondayStart').change(function (event) {
        $("#MondayEnd").removeData("previousValue");
        $('myform').validate().element('#MondayEnd');
    })
</script>
<script>
    $('#MondayEnd').change(function (event) {
        $("#MondayStart").removeData("previousValue");
        $('myform').validate().element('#MondayStart');
    })
</script>

score 0 · Answer 1 · answered May 26 '15 at 12:45

changed the Jquery to

<script>
    $('#MondayStart').change(function (event) {
        $("#MondayEnd").removeData("previousValue");
        $('#MondayEnd').valid();
    })
</script>
<script>
    $('#MondayEnd').change(function (event) {
        $("#MondayStart").removeData("previousValue");
        $('#MondayStart').valid();
    })
</script>

which has it working

Trying to force remote validation

1 Answers1