How can I call model validation error from javascript for the model column if the value is null in a form

Question

User-1355965324 posted

 I am creating a form with dropdown selection of the employee .  When we select the  employee name from the dropdown , then  there is button to enter the selected employee salary revision. But I need to create the error message  in <Span>  tag , if  the user  click the button without selecting the employeeId. Here is my code

Model class

Public class Employee()
{
  [Required]
  public int EmployeeID { get; set; }
  public string EmployeeName
}

Controller

Employee Controller
 public IActionResult AddEmployee(int DN = 0, int DPT = 0, int EID = 0)
 {
     return View();
 }

Salary Controller
 public IActionResult SalaryRevision(int empId)
 {
     return View();
 }

View 

@model Employee
 <form  asp-controller="Employee" asp-action="AddEmployee" data-ajax="true"
              data-ajax-method="POST"
              data-ajax-mode="replace"
              data-ajax-update="#content" class="form-horizontal" role="form" data-parsley-validate novalidate>

<div class="form-group">
       <label class="control-label control-label-left col-sm-3  text-danger" for="field88">Employee*</label>
       div class="controls col-sm-9">
             <select id="dropdownEmployee" class="form-control" asp-for="EmployeeID" asp-items="@ViewBag.Employees" onchange="FillEmployeeDetails()"></select>
                 <span asp-validation-for="EmployeeID" class="text-danger">@ViewBag.EmpErrormsg</span>
       </div>
</div>

<div class="form-group" style="display: block;">
      <label class="control-label control-label-left col-sm-5" for="field41"></label>
           <div class="row controls col-sm-7">
                   <button type="button" class="btn btn-primary form-control" onclick="CallSalaryRevision()">Enter / View Salary</button>
           </div>
 </div>

function CallSalaryRevision() {
        var empid = "@Model.EmployeeID";     
       // From here I have to  set ViewBag.EmpErrormsg in span , only  if empid is null or 0 
        if ($("#dropdownEmployee option:selected").val() > 0) {
            var href = '/Salary/SalaryRevision?employeeId=' + empid;
            $("#lnkFilter").attr('href', href);
            $("#lnkFilter").click();
        };
    }

It would be appreciated if some one can help me

Pol

Answer 1

User475983607 posted

The problem is the design bypasses validation by doing an HTTP GET.  A standard forum POST will fire the [Required] validation (shown in your model) automatically if the user does not select an Employee from the list.  Can you explain why you are not following standards validation found in every beginning level tutorial? 

Secondly, the design is missing the salary input which is part of your requirements.   Can you explain the high level requirement?  Are you asking the community to help design conditional validation and the EmployeeID is NOT required as coded in your original post?

Answer 2

User-1355965324 posted

Thanks mgebhard

I sorted it by giving span id in html  and innerhtml in javascript. it is working fine

<div class="controls col-sm-9">
                                            <select id="dropdownEmployee" class="form-control" asp-for="EmployeeID" asp-items="@ViewBag.Employees" onchange="FillEmployeeDetails()"></select>
                                            <span id="empError" asp-validation-for="EmployeeID" class="text-danger"></span>
                                        </div>

 if ($("#dropdownEmployee option:selected").val() > 0) {
            var href = '/Salary/SalaryRevision?employeeId=' + empid;
            $("#lnkFilter").attr('href', href);
            $("#lnkFilter").click();
        }
        else {
            document.getElementById('empError').innerHTML = "Employee Id must be given *";
        }

Answer 3

User475983607 posted

Ah, I get it.... you did not share all the relevant code and added a red herring ([Required] to make answering your post as difficult as possible.