Range validation in MVC Just shows Default Message

Question

I'm totally confused about this ridiculous problem but I have to solve. I have a field and I set required and range validation on it:

[Required(ErrorMessage = ValidationMessage.InputDataStart + Field.SmtpPort + ValidationMessage.InputDataEnd)]        
[Range(FieldSize.PortNumberMin, FieldSize.PortNumberMax, ErrorMessage = ValidationMessage.InputDataIsOutOfRangeStart + Field.SmtpPort + ValidationMessage.InputDataIsOutOfRangeEnd)]
public int SmtpPort { get; set; }      

And this is the code of NumericBox:

<div class="Component-Container-Border" style="@BorderWidth">
<div class="Component-Label" style="@LabelOfComponentWidth">@Html.DisplayNameFor(model => model)</div>
<div class="Component-Container-ComponentAndValidation" style="float:right;margin-bottom:0px;">
    @Html.TextBoxFor(m => m, new { type = "text", Class = "k-textbox", Value = Value, style = ComponentWidth + ";direction:ltr;border:1px solid #df795a;font-family:MasterFont,tahoma;", MaxLength = Len, Min = MinValue, Max = MaxValue })        
    <script>
        $("#@FieldName").on("keydown",function(e) {OnKeyDownIntegerNumber(e)});
        $("#@FieldName").on("input change keypress",function(e) {
            $(e.target).valid();
        });
    </script>
</div>
<div style="float:right;">
    <input id="ButtonPlus" type="Button" value="+" class="k-button" style="width: 28px; margin: 2px 2px 1px 0px; padding: 0px; height: 26px;font-size: 13px;" onclick="ButtonPlusClick(this, @MaxValue)" />
</div>
@if (Unit.Trim() != "")
{
    <div style="float:right;">
        <input id="ButtonMinus" type="Button" value="-" class="k-button" style="width: 28px; margin: 2px 2px 1px 0px; padding: 0px; height: 26px; font-size: 13px;" onclick="ButtonMinusClick(this, @MinValue)" />
    </div>
    <span style="float:right;margin-right:5px;margin-top:5px;">@Unit</span>
}
else
{
    <div>
        <input id="ButtonMinus" type="Button" value="-" class="k-button" style="width: 28px; margin: 2px 2px 1px 0px; padding: 0px; height: 26px; font-size: 13px;" onclick="ButtonMinusClick(this, @MinValue)" />
    </div>
}
<div style="height:19px;">
@Html.ValidationMessageFor(model => model, "", new { @class = "Component-Validation-Message"})
</div>

But when I input a number that is out of range, validation shows me the default range message instead of my custom message.

Like This: Showing default message of range validation

This is inspect of My textBox and javascript files inspect and javascripts

So, where I could be wrong, since the messages are not showing correctly?

Answer 1

I finally found out my problem, it was referred to this line:

@Html.TextBoxFor(m => m, new { type = "text", Class = "k-textbox", Value = Value, style = ComponentWidth + ";direction:ltr;border:1px solid #df795a;font-family:MasterFont,tahoma;", MaxLength = Len, Min = MinValue, Max = MaxValue })

When I use min and max attribute, range validator just shoes default message and I changed to this:

@Html.TextBoxFor(m => m, new { type = "text", Class = "k-textbox", Value = Value, style = ComponentWidth + ";direction:ltr;border:1px solid #df795a;font-family:MasterFont,tahoma;", MaxLength = Len})