JQuery Unobtrusive

Question

I am using jquery unobtrusive in my bootstrap modals to validate form. so I have file field that user select a picture but it is not required but still when user submit the form still required this my model :

 public class CreateSlide
    {
    
        [MaxFileUploadSize(1*1024*1024,ErrorMessage = ValidationMessages.uploadSize)]
        public IFormFile Picture { get;  set; }
        [Required(ErrorMessage = ValidationMessages.requiredField)]
        public string HeadingText { get;  set; }
        [Required(ErrorMessage = ValidationMessages.requiredField)]
        public string TitleText { get;  set; }
        [Required(ErrorMessage = ValidationMessages.requiredField)]
        public string Text { get;  set; }
        [Required(ErrorMessage = ValidationMessages.requiredField)]
        public string BtnText { get;  set; }
    }

I remove the required data annotation in model an i try to remove it with jquery in the form but it is not working

Answer 1

so I have file field that user select a picture but it is not required but still when user submit the form still required

You have two options to try. Hope it can help you.

Option 1 , remove below code from your project.csproj file. Read this to know more.

 <Nullable>enable</Nullable>

Option2 , add? like:

public IFormFile ? Picture { get;  set; }

Update

The structure:

IndexModel

public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }
        [BindProperty]
        public CreateSlide CreateSlide { get; set; } 
        public void OnGet()
        {

        }
        public void OnPost(CreateSlide createSlide)
        {

        }
    }

Index view:

    @page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

<h4>CreateSlide</h4>
<hr />
<button id="btnShowModal" type="button"> Upload </button>
<div class="modal fade" id="Modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button id="btnHideModal" type="button" class="btn btn-secondary" data-dismiss="modal">  ×</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <form method="post" enctype="multipart/form-data">
                            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                            <div class="form-group">
                                <label asp-for="CreateSlide.Picture" class="control-label"></label>
                                <input asp-for="CreateSlide.Picture" type="file" class="form-control" />
                                <span asp-validation-for="CreateSlide.Picture" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <label asp-for="CreateSlide.HeadingText" class="control-label"></label>
                                <input asp-for="CreateSlide.HeadingText" class="form-control" />
                                <span asp-validation-for="CreateSlide.HeadingText" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <label asp-for="CreateSlide.TitleText" class="control-label"></label>
                                <input asp-for="CreateSlide.TitleText" class="form-control" />
                                <span asp-validation-for="CreateSlide.TitleText" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <label asp-for="CreateSlide.Text" class="control-label"></label>
                                <input asp-for="CreateSlide.Text" class="form-control" />
                                <span asp-validation-for="CreateSlide.Text" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <label asp-for="CreateSlide.BtnText" class="control-label"></label>
                                <input asp-for="CreateSlide.BtnText" class="form-control" />
                                <span asp-validation-for="CreateSlide.BtnText" class="text-danger"></span>
                            </div>
                            <div class="form-group">
                                <input type="submit" value="Create" class="btn btn-primary" />
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
<script type="text/javascript">
        $(document).ready(function () {
                $("#btnShowModal").click(function () {                                 
                $("#Modal").modal('show');
            });
 $("#btnHideModal").click(function () {
                $("#Modal").modal('hide');
            });
        });
    </script>
}

CreateSlide:

public class CreateSlide
    {
        public IFormFile Picture { get; set; }
        [Required]
        
        public string HeadingText { get; set; }
        [Required]
        public string TitleText { get; set; }
        [Required]
        public string Text { get; set; }
        [Required]
        public string BtnText { get; set; }
    }