ASP.NET Core MVC 自定義驗證不會顯示錯誤信息，仍然提交表單

Question

我想詢問一個問題，其中我基於MVC Model Validaton進行了自定義驗證，但無法顯示錯誤。 我正在創建一個RequiredIf屬性，其中如果一個屬性等於一個值，那么RequiredIf屬性是必需的。

我已經調試了代碼並且運行良好，但它沒有在 UI 上顯示錯誤並且仍然提交表單。

這是我的屬性代碼：

public class RequiredIfAttribute : ValidationAttribute, IClientModelValidator
{
    private string _propertyName { get; set; }
    private object _desiredValue { get; set; }
    private string _errorMessage { get; }

    public RequiredIfAttribute(string propertyName, object desiredvalue, string errorMessage)
    {
        _propertyName = propertyName;
        _desiredValue = desiredvalue;
        _errorMessage = errorMessage;
    }

    protected override ValidationResult IsValid(object value, ValidationContext context)
    {
        object instance = context.ObjectInstance;
        Type type = instance.GetType();
        object proprtyvalue = type.GetProperty(_propertyName).GetValue(instance, null);

        if (proprtyvalue.ToString() == _desiredValue.ToString() && value != null)
        {
            return ValidationResult.Success;
        }
        else
        {
            return new ValidationResult(GetErrorMessage());
        }
    }

    public string GetErrorMessage() => _errorMessage;

    public void AddValidation(ClientModelValidationContext context)
    {
        MergeAttribute(context.Attributes, "data-val", "true");
        MergeAttribute(context.Attributes, "data-val-requiredIf", GetErrorMessage());
    }

    private static bool MergeAttribute(IDictionary<string, string> attributes, string key, string value)
    {
        if (attributes.ContainsKey(key))
        {
            return false;
        }

        attributes.Add(key, value);
        return true;
    }
}

這是 model 的視圖：

public class PaymentViewModel
{
    [Required(ErrorMessage = "Transaction type required.")]
    [DisplayName("Transaction Type")]
    public int TransactionType { get; set; }

    [Required(ErrorMessage = "Payment date required.")]
    [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd/MM/yy}", ApplyFormatInEditMode = true)]
    [DisplayName("Payment Date")]
    public DateTime? PaymentDate { get; set; }

    [Required(ErrorMessage = "Amount is required.")]
    public decimal? Amount { get; set; }

    [RequiredIf(nameof(TransactionType), TransactionTypeIDs.DebitTransactionTypeIDs.PAYMENT_TO_CREDITOR, "Creditor required.")]
    public string? Creditor { get; set; }

    public string? Notes { get; set; }
}

最后是 html 的形式

<div class="col-12 col-md-12" id="creditorContainer">
     @Html.LabelFor(m => m.Creditor)
     @Html.TextBoxFor(m => m.Creditor, new { list = "paymentCreditorList", @class = "form-control creditor-payment" })
     @Html.ValidationMessageFor(m => m.Creditor)
</div>

我已確保腳本也已加載

    <script src="~/lib/jquery/dist/jquery.min.js" inline></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js" inline></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js" inline></script>

Answer 1

參考下面的代碼，為您的客戶端驗證添加一些js：

<form asp-action="Index">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="name" class="control-label"></label>
                <input asp-for="name" class="form-control" />
                <span asp-validation-for="name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Creditor" class="control-label"></label>
                <input asp-for="Creditor" class="form-control" />
                <span asp-validation-for="Creditor" class="text-danger"></span>
            </div>
            <div id="errormess"  class="text-danger"></div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>

<script>
    $(document).ready(function(){
   $("#Creditor").focusout(function(){
      if($(this).val() != $("#name").val())
      {
         $("#errormess").html('Creditorvalue is not equal to namevalue');
      }
      else{ $("#errormess").html(''); }
   });
    });
</script>

結果：