I have one form where i have used html DropDownList and bind with json data. Where select keyword is already selected.
I want to validate that DropDownList using jQuery Ajax how can i do that?
I want to validate prescription date after click on add button
$("#AddPrescription").click(function (e) {
e.preventDefault();
if ($("#prescform").valid()) {
alert('valid')
$('#prescform').submit();
}
else {
alert('not valid')
return false;
}
var planname = $("#PlanId").val();
var OTCMappings = new Array();
OTCMappings = $("#ddlotccode").val();
var myObjotc = [];
$.each(OTCMappings, function (i, value) {
myObjotc.push({ 'ProductID': value });
});
var PharmaDrugsMapping = new Array();
PharmaDrugsMapping = $('#pharmacy').val().split(",");
var myObjpharm = [];
$.each(PharmaDrugsMapping, function (i, value) {
myObjpharm.push({ 'PharmacyDrugs': value });
});
var prescritondate = $("#presdate").val();
var newdate=formatDate(prescritondate)
var URL = '@Url.Action("Home","Index")';
var model = { PatientId: $("#patientidselected").val(), PrescriptionPlanID: planname, PrescriptionDate: newdate, OTCMapping: myObjotc, PharmaDrugsMapping: myObjpharm };
$.post(URL, model, function (res) {
if(res.status)
{
$.toast({
heading: 'Success',
text: res.message,
showHideTransition: 'slide',
icon: 'success'
});
window.location.reload();
}
else
{
$.toast({
heading: 'Error',
text: res.message,
showHideTransition: 'fade',
icon: 'error'
});
}
});
});
<form id="prescform">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="icd-disc">Date</label>
<div class="input-group date datepicker-wrapper dateFieldRestrictFutureDate" id="datepickerpres">
@* <input type="text" class="form-control" id="presdate">*@
@Html.TextBoxFor(c => c.PrescAdd.PrescriptionDate, new { id="presdate",@class="form-control" })
<div class="input-group-addon">
<span><i class="fa fa-calendar"></i></span>
</div>
</div>
<span asp-validation-for="PrescAdd.PrescriptionDate" class="text-danger"></span>
@* <input type="date" class="form-control">*@
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ssn">Select Prescription Plan</label>
<select class="form-control form-select" id="PlanId" name="Planame">
@* <span asp-validation-for="patientadd.State" class="text-danger"></span>*@
</select>
<span asp-validation-for="PrescAdd.PrescriptionPlanID" class="text-danger"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="pharmacy">Pharmacy Drugs</label>
<input type="text" class="form-control" id="pharmacy">
<span asp-validation-for="PrescAdd.PharmaDrugsMapping" class="text-danger"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ssn">OTC Products</label>
<select name="ddlotc" class="select2" style="width:100%" id="ddlotccode" multiple>
</select>
<span asp-validation-for="PrescAdd.OTCMapping" class="text-danger"></span>
</div>
</div>
<div class="col-md-4 align-self-center mt-3">
@* <button class="btn upload-btn px-5" id="AddPrescription" type="button">Add</button>*@
<input id="AddPrescription" type="submit" value="Add" class="btn upload-btn px-5" />
</div>
</div>
</form>
public class Index
{
[Required]
public string PatientID { get; set; }
[Required]
public long PrescriptionPlanID { get; set; }
[Required(ErrorMessage = "Prescription Issue Date is required")]
public DateTime PrescriptionDate { get; set; }
public List<PatientPrescriptionPlanOTCMapping> OTCMapping { get; set; }
public List<PatientPrescriptionPlanPharmaDrugsMapping> PharmaDrugsMapping { get; set; }
}