title: How to trigger ASP.Net core model validation and remote attribute in bootstrap modal
body: <p>I want to know how to trigger the model validation in bootstrap modal pop up before submitting?
  I want to trigger the required and remoteattribute validation from my modal pop up</p>
  <p>Here is my model code:</p>
  <pre><code>    public class Employee
      {
          public int Id { get; set; }
  
  [Required]
          [Remote(&quot;CheckFirstName&quot;, &quot;Employees&quot;, ErrorMessage = &quot;FirstName already exists.&quot;)]
          public string FirstName { get; set; }
  
          //code here
      }
  </code></pre>
  <p>My controller code:</p>
  <pre><code>    public IActionResult Create()
          {
              Employee emp = new Employee();
              return PartialView(&quot;_EmployeePartial&quot;, emp);
          }
  
          [HttpPost]
          [ValidateAntiForgeryToken]
          public async Task&lt;IActionResult&gt; Create([Bind(&quot;Id,FirstName,LastName,MI&quot;)] Employee employee)
          {
              //code here
              return View(employee);
          }
  
  [AcceptVerbs(&quot;Post&quot;, &quot;Get&quot;)]
  public IActionResult CheckFirstName(string fname){
  //code here
  }
  </code></pre>
  <p>My employeepartial code:</p>
  <pre><code>@model CrudApp.Models.Employee
  &lt;!-- Modal --&gt;
  &lt;div class=&quot;modal fade&quot; id=&quot;addEmployee&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;form asp-action=&quot;Create&quot;&gt;
                      //code here
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-save=&quot;modal&quot;&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Code to call modal:</p>
  <pre><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;ajax-modal&quot; data-target=&quot;#addEmployee&quot;
          data-url=&quot;@Url.Action(&quot;Create&quot;)&quot;&gt;Create&lt;/button&gt;
  </code></pre>
  <p>JS Code:</p>
  <pre><code>    var PlaceHolderElement = $('#PlaceHolderHere');
      $('button[data-toggle=&quot;ajax-modal&quot;]').click(function (event) {
  
          var url = $(this).data('url');
          $.get(url).done(function (data) {
              PlaceHolderElement.html(data);
              PlaceHolderElement.find('.modal').modal('show');
          });
      });
  
      PlaceHolderElement.on('click', '[data-save=&quot;modal&quot;]', function (event) {
  
          var form = $(this).parents('.modal').find('form');
          var actionUrl = form.attr('action');
          var sendData = form.serialize();
          $.post(actionUrl, sendData).done(function (data) {
              PlaceHolderElement.find('.modal').modal('hide');
          });
      });
  </code></pre>