Validate DropDownList using jQuery in ASP.Net Core MVC

pandeygolu4200
 
on Oct 13, 2022 10:41 PM
717 Views

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; }
}

 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
KasimA
 
on Oct 13, 2022 10:59 PM

Hi pandeygolu420...,

Enable client side validation this will ensure the PrescriptionDate will be validate before submit.

Refer below article.

ASP.Net Core MVC: Client Side Email Validation using Data Annotation attributes and jQuery