MVC Remote Validation - Clear or set additional field errors

Question

We have 2 input textfields on the screen whose combination makes up a valid entry. We are doing remote validation on both of them.

Our ViewModel:

[Remote("IsExampleValid", "Validation", AdditionalFields = "Field2")]
public int Field1 { get; set; }

[Remote("IsExampleValid", "Validation", AdditionalFields = "Field1")]
public int Field2 { get; set; }

The problem is these still fire separately and do not truly act together like we need. For example, if I enter bad data in both of them to make an invalid entry then they both will have an error. If I change Field2 to make a valid combination, the remote validation method will get called and mark Field2 as valid. However, Field1 will still be invalid. Field1 should be valid though because they are a combination. Is there a better way to do 2 fields that make up a valid combination?

Have you considered implementing `IValidatableObject` on your ViewModel? — podiluska, Aug 24 '12 at 13:49
IValidatableObject will work to validate on submit, but can IValidatableObject validate immediately like remote validation can? We need immediate feedback. — user1167865, Aug 24 '12 at 13:58

score 4 · Answer 1 · edited May 23 '17 at 12:21

You can use this awesome piece of code provided by Kiff:

function initializeRemotelyValidatingElementsWithAdditionalFields($form) {
    var remotelyValidatingElements = $form.find("[data-val-remote]");

    $.each(remotelyValidatingElements, function (i, element) {
        var $element = $(element);

        var additionalFields = $element.attr("data-val-remote-additionalfields");

        if (additionalFields.length == 0) return;

        var rawFieldNames = additionalFields.split(",");

        var fieldNames = $.map(rawFieldNames, function (fieldName) { return fieldName.replace("*.", ""); });

        $.each(fieldNames, function (i, fieldName) {
            $form.find("[id$="+fieldName+"]").change(function () {
                 if ($element.is(':enabled'))
                 {
                     // force re-validation to occur
                     $element.removeData("previousValue");

                     $element.valid();
                 }
            });
        });
    });
}

Call the function:

$(document).ready(function() {
    initializeRemotelyValidatingElementsWithAdditionalFields($("form"));
});

Note: I adapted the $form.find portion so that it works when one is using Editing a variable length list, ASP.NET MVC 2-style in which case element IDs are prefixed. I also added the $element.is(':enabled') check so that validation will only fire if the element is currently enabled on the page.

score 1 · Answer 2 · answered May 25 '17 at 07:25

MVC Remote Validation - Clear or set additional field errors

public int Field1 { get; set; }

    [Remote("IsExampleValid", "Validation", AdditionalFields = "Field1")]
    public int Field2 { get; set; }

jquery code here

$('#Field1').on('change', function () {
       //code
        $('#Field2').removeData('previousValue');
    });

it's Working additionalField value change after remote validation check isvalid or not

MVC Remote Validation - Clear or set additional field errors

2 Answers2