CODEWITHSUNDEEP
c#jqueryunobtrusive-validationasp.net-mvc-5.2
jmzagorski
jmzagorski

Reputation: 1155

MVC5 C# jQuery Unobtrusive Validation with ignore and Show/Hide Message

My users have requested that I change one of the fields from being required to optional, but still show/hide the warning message. Trying to do this with as little refactoring as I can I added an allowsubmission property on my data annotation on the server and in the jquery method on the client (see below).

Is it possible to set an ignore class on an element while still hiding/showing the message? It seems the method fires the first time and then stops firing after the ignore class is added, so the message stays on the screen.

Or is there a better way? Thank you.

$(document).ready(function () {
    $("form").validate().settings.ignore = ".ignore, :hidden";
});

$.validator.unobtrusive.adapters.add('dependentrange', ['minvalueproperty', 'maxvalueproperty', 'allowsubmission'],
      function (options) {
          options.rules.dependentrange = options.params;
          if (options.message) {
              $.validator.messages.dependentrange = options.message;
          }
      }
);

$.validator.addMethod('dependentrange', function (value, element, params) {
    var minValue = parseFloat($('input[name="' + params.minvalueproperty + '"]').val());
    var maxValue = parseFloat($('input[name="' + params.maxvalueproperty + '"]').val());
    var currentValue = parseFloat(value);

    // if there is a value check it. If for some reason the min and max can't be found return true because 
    // i do not know the values to validate. Usually that is a coding mistake
    if (isNaN(currentValue) || minValue > currentValue || currentValue > maxValue) {

        var message = $(element).attr('data-val-dependentrange');

        $.validator.messages.dependentrange = $.validator.format(message, minValue, maxValue);

        if (params.allowsubmission) {
            // once this property is added, the method does not fire
            $(element).addClass("ignore");
        }

        return false;
    }

    $(element).removeClass('ignore');

    return true;

}, '');

Upvotes: 0

Views: 720

Answers (1)

jmzagorski
jmzagorski

Reputation: 1155

I ended up using validators API to show and hide my own warning message while always return true.

$.validator.unobtrusive.adapters.add('dependentrange', ['minvalueproperty', 'maxvalueproperty'], function (options) {
    options.rules['dependentrange'] = options.params;
    if (options.message) {
        options.messages['dependentrange'] = options.message;
    }
});

$.validator.addMethod("dependentrange", function (value, element, params) {
    var valKeyed = parseFloat(value),
        $elem = $(element),
        $warning = $elem.closest('div').nextAll('.alert-warning:first')
        msg = $elem.data('val-dependentrange),
        isValid = this.optional(element) || valKeyed >= parseFloat(params.minvalueproperty) && valKeyed <= parseFloat(params.maxvalueproperty);

    // there are no from or two found, so just return true with no warning
    if (!params.minvalueproperty || !params.maxvalueproperty) {
        return true;
    }

    if (isValid) {
        $warning.text('')
        $warning.addClass('hidden');
    }
    else {
        $warning.text(msg)
        $warning.removeClass('hidden');
    }

    return true;
});

Upvotes: 1

Related Questions