bootstrap modal form validation with slect2

Question

I am using partialview in modal form. In this form there is a select2 option list which working fine. But when press submit button, required fields as per model are not validating i.e. not showing error.

I have used lots option from internet, but failed to get the desired result.

When we remove the select2 field from partialview, it's working fine.
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace IDESK.Models.Customer  
{  
    public class Cust_Master  
    {  
        [Key]  
        [Display(Name = "CUST_CODE")]  
        [Required(ErrorMessage = "Please enter Customer Code")]  
        public int  CUST_CODE { get; set; }  
  
        [Display(Name = "CUST_NAME")]  
        [Required(ErrorMessage = "Please enter Customer Name")]  
        [MaxLength(50)]  
        public string CUST_NAME { get; set; }  
  
        [Display(Name = "CUST_REGN")]  
        [Required(ErrorMessage = "Please enter Customer Regn")]  
        [MaxLength(20)]   
        public string CUST_REGN { get; set; }  
  
        [Display(Name = "SALES_ORG")]  
        [Required(ErrorMessage = "Please enter Customer Sales Orgn.")]  
        [MaxLength(20)]  
        public string  SALES_ORG { get; set; }  
  
        [Display(Name = "CUST_GROUP")]  
        [Required(ErrorMessage = "Please enter Customer Customer Group")]  
        [MaxLength(20)]   
        public string CUST_GROUP { get; set; }  
  
        [Display(Name = "INCO_TERMs")]  
        [Required(ErrorMessage = "Please enter Inco Term")]  
        [MaxLength(5)]  
        public string INCO_TERMS { get; set; }  
  
        [Display(Name = "BILL_CURRENCY")]  
        [Required(ErrorMessage = "Please enter Bill Currency")]  
        [MaxLength(5)]  
        public string BILL_CURCY { get; set; }  
  
        [Display(Name = "Is Pallet?")]  
        public bool IsPallet { get; set; }  
  
    }  
}  
-------  
  
@model IEnumerable  
  
@**@  
  
  
@Html.AntiForgeryToken()  
  
  
      
        Customer Master Index  
          
  
              
              
            @{  
                  
                if (TempData["upload"] == "OK")  
                {  
                    @Html.ActionLink("Save List", "SaveList", new { action = "SaveList" }, new { @class = "btn btn-secondary small" })  
                }  
            }  
              
                  
              
          
  
        @{  
            if (TempData["Message"] != null)  
            {  
                  
                      
                          
                            @Html.Raw(TempData["Alert"])  
                          
                      
                  
            }  
        }  
  
        @await Html.PartialAsync("_tblCustomer", Model)  
  
  
  
      
  
@section Scripts {  
    @**@  
      
      
  
      
      
}  
  
@model IDESK.Models.Customer.Cust_Master;  
@{  
    Layout = null;  
      
}  
  
  
  
  
  
  
   
@*https://softdevpractice.com/blog/asp-net-core-mvc-ajax-modals/*@  
@Html.AntiForgeryToken()  
  
  
      
          
              
                @{  
                    if (ViewBag.action == "Edit")  
                    { Update Raw Material }  
                    else if (ViewBag.action == "Delete")  
                    { Shown Material will be deleted.
Please confirm? }  
                    else  
                    { Create Raw Material }  
                }  
                @*Create Raw Material*@  
                  
              
              
  
                  
                      
                      
                          
                              
                                  
                                  
                                  
                              
                              
                                  
                                  
                                  
                              
                              
                                  
                                  
                                  
                                  
                              
                              
                                  
                                  
                                  
                              
  
                          
                      
                    @{  
                        if (ViewBag.action == "Edit")  
                        {  
                              
                                  
                                    @**@  
                                      
                                      
                                    @*Back to List *@  
                                  
                              
                        }  
                        else if (ViewBag.action == "Delete")  
                        {  
                              
                                  
                                    @**@  
                                      
                                      
                                    @*Back to List *@  
                                  
                              
                        }  
                        else  
                        {  
                              
                                  
                                    @**@  
                                      
                                    @*Back to List *@  
                                  
                              
                        }  
                    }  
                  
              
              
                  
                @{  
                    if (ViewBag.action == "Delete")  
                    {  
                          
                    }  
                    else  
                    {  
                          
                    }  
                }  
              
          
      
  
  
  
  
  
$(function () {  
     
    var placeholderElement = $('#modal-placeholder');  
    $.validator.setDefaults({  
        ignore: ""  
    });  
    //$('button[data-bs-toggle="ajax-modal"]').click(function (event) {  
    $(document).on('click', 'button[data-bs-toggle="ajax-modal"]', function (event) {  
        var url = $(this).data('url');  
        $.get(url).done(function (data) {  
            placeholderElement.html(data);  
            placeholderElement.find('.modal').modal('show');  
              
        });  
    });  
  
    placeholderElement.on('click', '[data-bs-save="modal"]', function (event) {  
        event.preventDefault();  
        var form = $(this).parents('.modal').find('form');  
        var actionUrl = form.attr('action');  
        var dataToSend = form.serialize();  
          
        $.post(actionUrl, dataToSend).done(function (data) {  
            var newBody = $('.modal-body', data);  
            placeholderElement.find('.modal-body').replaceWith(newBody);  
  
            var isValid = newBody.find('[name="IsValid"]').val() == 'True';  
            if (isValid) {  
                //$('#notification').text('Data saved successfully!');  
                //location.reload();  
                //placeholderElement.find('.modal').modal('hide');  
  
                var tableElement = $('#tblName');  
                var tableUrl = tableElement.data('url');  
                $.get(tableUrl).done(function (table) {  
                    tableElement.replaceWith(table);  
                });  
  
            }  
            else {   
            //    $('#notification').text('Data operation failed!');  
                  
                  
                placeholderElement.find('.modal').modal('show');  
                bootstrap.Alert();  
            }  
              
            bootstrap.Alert();  
            placeholderElement.find('.modal').modal('hide');  
             
        });  
    });  
});  
  
  
using IDESK.Models;  
using Microsoft.AspNetCore.Mvc;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using IDESK.Models.Customer;  
using Microsoft.EntityFrameworkCore;  
using IDESK.Extensions.Alert;  
using Microsoft.AspNetCore.Mvc.Rendering;  
using Microsoft.AspNetCore.Http;  
using CsvHelper.Configuration;  
using System.Globalization;  
using System.IO;  
using CsvHelper;  
  
  
namespace IDESK.Controllers.Customer  
{  
    public class CustomerMasterController : Controller  
    {  
        private readonly DbConn _dbConn;  
        public static List ItemList = new();  
        public SelectList Customers { get; set; }  
          
    public CustomerMasterController(DbConn _db)  
        {  
            _dbConn = _db;  
        }  
        public IActionResult Index()  
        {  
            try  
            {  
                var ListItem = _dbConn.CUST_MAST.ToList(); //--for single table  
                var isAjax = Request.Headers["X-Requested-With"] == "XMLHttpRequest";  
                if (isAjax)  
                {  
                    return PartialView("_tblCustomer", ListItem);  
                }  
                // ModelState.Clear();  
                return View(ListItem);  
            }  
            catch (Exception ex)  
            {  
                return View();  
            }  
        }  
        [HttpGet]  
        public ActionResult Create(string action)  
        {  
            LoadDDL();  
            LoadIncoTerms();  
            LoadCurrency();  
            LoadCustGrop();  
            Cust_Master custmast = new Cust_Master();  
            return PartialView("_Customer", custmast);  
        }  
        [HttpPost]  
        [ValidateAntiForgeryToken]  
        public async Task Create(Cust_Master collection, string action)  
        {  
            int result = 0;  
            try  
            {  
                if (ModelState.IsValid)  
                {  
                    if (action == "Edit")  
                    {  
                        result = (int)(_dbConn.Entry(collection).State = EntityState.Modified);  
                        await _dbConn.SaveChangesAsync();  
                        ViewBag.action = "Edit";  
                        TempData["Message"] = "Customer Master data Updated!";  
                        TempData["Alert"] = CommonServices.CommonServices.ShowAlert(Alerts.Success, TempData["Message"].ToString());  
                        return PartialView("_Customer", collection);  
                    }  
                    else if (action == "Create")  
                    {  
                            _dbConn.CUST_MAST.Add(collection);  
                            result = (int)await _dbConn.SaveChangesAsync();  
                            TempData["Message"] = "Customer Master data Created!";  
                            ViewBag.action = "Create";  
                            TempData["Alert"] = CommonServices.CommonServices.ShowAlert(Alerts.Success, TempData["Message"].ToString());  
                        //ShowMsg();  
                        LoadDDL();  
                        LoadIncoTerms();  
                        LoadCurrency();  
                        LoadCustGrop();  
                        return PartialView("_Customer", collection);  
  
                            //return PartialView("Index", collection);  
                          
                    }  
                    else if (action == "Delete")  
                    {  
                        result = (int)(_dbConn.Entry(collection).State = EntityState.Deleted);  
                        await _dbConn.SaveChangesAsync();  
                        ViewBag.action = "Delete";  
                        TempData["Message"] = "Customer Master data Deleted!";  
                        TempData["Alert"] = CommonServices.CommonServices.ShowAlert(Alerts.secondary, TempData["Message"].ToString());  
                    }  
                    if (result <= 0)  
                        TempData["Alert"] = CommonServices.CommonServices.ShowAlert(Alerts.Danger, "Unknown error : Operation failed");  
                }  
                else  
                {  
                    TempData["Message"] = "Operation failed! ...Invalid or Incomplete Data!";  
                    TempData["Alert"] = CommonServices.CommonServices.ShowAlert(Alerts.Danger, TempData["Message"].ToString());  
                    _dbConn.Entry(collection).State = EntityState.Detached;  
                    // ShowMsg();  
                      
                    return PartialView("_Customer", collection);  
                   // return RedirectToAction("Index");  
                    //return PartialView("_AlertMsg");  
                }  
  
                _dbConn.Entry(collection).State = EntityState.Detached; //---Clears current state.  
                //return RedirectToAction("Index");  
                return PartialView("_Customer", collection);  
                //return PartialView("_tblPartial", collection);  
            }  
            catch (Exception ex)  
            {  
                TempData["Message"] = "Operation failed.
" + ex.ToString();  
                TempData["Alert"] = CommonServices.CommonServices.ShowAlert(Alerts.Danger, TempData["Message"].ToString());  
                //ModelState.Clear();  
                _dbConn.Entry(collection).State = EntityState.Detached; //---Clears current state.  
                return RedirectToAction("Index");  
            }  
        }  
        [HttpGet]  
        public ActionResult Edit(Cust_Master collection)  
        {  
            ViewBag.action = "Edit";  
            LoadDDL();  
            LoadIncoTerms();  
            LoadCurrency();  
            LoadCustGrop();  
            return PartialView("_Customer", collection);  
        }  
        public ActionResult ShowMsg()  
        {  
            return Content("Data added successfully");  
        }  
        public ActionResult Delete(Cust_Master collection)  
        {  
            ViewBag.action = "Delete";  
            LoadDDL();  
            LoadIncoTerms();  
            LoadCurrency();  
            LoadCustGrop();  
            return PartialView("_Customer", collection);  
        }  
  
        private void LoadDDL() //--Load Dept dropdown list.  
        {  
            try  
            {  
                var custRegnList = _dbConn.CUST_REGION.AsEnumerable().Select(x => new SelectListItem()  
                {  
                    Text = String.Format("{0,-10} : {1} : {2} : {3} : {4} ", x.CUST_REGN, x.REGN_NAME,x.COUNTRY,x.STATE,x.CITY),  
                    Value = x.CUST_REGN.ToString()  
                }).ToList();  
  
                ViewBag.CustRegnList = new SelectList(custRegnList, "Value", "Text");  
            }  
            catch (Exception ex)  
            {  
                throw ex;  
            }  
        }  
  
        private void LoadIncoTerms() //--Load Dept dropdown list.  
        {  
            try  
            {  
                var IncoList = _dbConn.INCO_TERMS.AsEnumerable().Select(x => new SelectListItem()  
                {  
                    Text = String.Format("{0,-10} : {1}", x.INCO_TERMS, x.INCO_DESC),  
                    Value = x.INCO_TERMS.ToString()  
                }).ToList();  
  
                ViewBag.IncoList = new SelectList(IncoList, "Value", "Text");  
            }  
            catch (Exception ex)  
            {  
                throw ex;  
            }  
        }  
        private void LoadCurrency() //--Load Dept dropdown list.  
        {  
            try  
            {  
                var Currency = _dbConn.CURRENCY.AsEnumerable().Select(x => new SelectListItem()  
                {  
                    Text = String.Format("{0,-10} : {1}", x.BILL_CURCY, x.CURCY_NAME),  
                    Value = x.BILL_CURCY.ToString()  
                }).ToList();  
  
                ViewBag.Currency = new SelectList(Currency, "Value", "Text");  
            }  
            catch (Exception ex)  
            {  
                throw ex;  
            }  
        }  
  
        private void LoadCustGrop()   
        {  
            try  
            {  
                var CustGroup = _dbConn.CUST_GROUP.AsEnumerable().Select(x => new SelectListItem()  
                {  
                    Text = String.Format("{0,-10} : {1}", x.CUST_GROUP, x.CUST_GRP_DTL),  
                    Value = x.CUST_GROUP.ToString()  
                }).ToList();  
  
                ViewBag.CustGroup = new SelectList(CustGroup, "Value", "Text");  
            }  
            catch (Exception ex)  
            {  
                throw ex;  
            }  
        }  
  
        public void OnGet()  
        {  
            this.Customers = new SelectList(this._dbConn.CUST_REGION, "CUST_REGN", "CUST_NAME");  
        }  
    }  
}

Accepted Answer

Hi @anil kumar ,

Here is a simple working demo you could follow:

Index.cshtml:

  
  
  
  
@section Scripts  
{  
    < link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />  
    < script src="https://code.jquery.com/jquery-3.2.1.min.js">  
    < script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js">  
    < script src="~/lib/jquery-validation/dist/jquery.validate.min.js">  
    < script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js">  
  
    < script >  
         $(function （）{     
             var placeholderElement = $('#modal-placeholder');  
             $(document).on('click', 'button[data-bs-toggle="ajax-modal"]', function （event） {  
                 var url = $(this).data('url');  
                 $.get(url).done(function （data） {  
                     placeholderElement.html(data);  
                     placeholderElement.find('.modal').modal('show');                   
                 });  
             });  
         })  
      
}

_Customer.cshtml:

213624--customer.txt

HomeController:

public class HomeController : Controller  
{  
    public async Task Index()  
    {            
        return View();  
    }  
    [HttpGet]  
    public ActionResult Create(string action)  
    {  
        Cust_Master custmast = new Cust_Master();  
        return PartialView("_Customer", custmast);  
    }  
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,
Rena

bootstrap modal form validation with slect2

0 additional answers