locked
Dynamic Drop Down List Validation RRS feed

  • Question

  • User210895818 posted

    The scenario is that:

    1- User select Department from Dropdownlist 

    2- Degree Dropdown List dynamically cascade through ajax against the selected department

    and if the user selects the degree from the dropdown, the user must enter no in the textbox.

    PROBLEM

    1- when a user selects any department and if the user does not select degree, button submit the values to the database with 0 value on degree column (user must select the degree if the degree dropdown is not empty)

    2- Whenever I submit, the required message show on Textbox even it degree dropdown value is selected or not. (Don't have an idea to link that textbox with dynamically created Degree dropdown list and message will only show when user select degree)

    Here is my code:

    Controller

            public JsonResult LoadDegreeProgramByDepartment(string DepartId)
            {
                int did = Convert.ToInt16(DepartId);
                List<SelectListItem> degreeList = new List<SelectListItem>();
                var degree = (from u in Context.DegreePrograms                      
                              where u.Depart_ref_id == did && u.StartYear == "2019" && u.Program_ref_id == 1  select u);
                if(degree != null) 
                {
                    foreach(var iten in degree)
                    {
                        degreeList.Add(new SelectListItem {
                            Value = iten.ID.ToString(),
                            Text = iten.DegreeprogramName
                        });
                    }
                }
                return Json(degreeList, JsonRequestBehavior.AllowGet);
            }
    

    And View + Ajax Code

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="PAdd2">Department <picture style="color:red;font-weight:bold;">*</picture></label>
                <div class="col-sm-9">
                    @Html.DropDownList("Depart_ref_id", new SelectList(ViewBag.DepartList, "ID", "DepartName"), "-- Select  --", new { @class = "select2 col-xs-12 col-sm-5", @id = "Department"})
                </div>
                @Html.ValidationMessageFor(model => model.Depart_ref_id)
            </div>
    
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="PAdd2"> Degree <picture style="color:red;font-weight:bold;">*</picture></label>
                <div class="col-sm-9">
                    @Html.DropDownListFor(model => model.DegreeProgram_ref_id, new SelectList(Enumerable.Empty<SelectListItem>(), "id", "name"), "--Select Degree--", new { @class = "select2 col-xs-12 col-sm-5", id = "DegreeList"})
                    @*@Html.DropDownList("DegreeProgram_ref_id", new SelectList(ViewBag.DegreeList, "ID", "DegreeprogramName"), "-- Select  --", new { @class = "select2 col-xs-12 col-sm-5", @id="Degree" })*@
                </div>
                @Html.ValidationMessageFor(model => model.DegreeProgram_ref_id)
            </div>
    
    
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="PAdd2">  Marks <picture style="color:red;font-weight:bold;">*</picture></label>
                    <div class="col-sm-9">
                        @Html.TextBoxFor(model => model.IObtSubjectMarks, new { @class = "col-xs-12 col-sm-5 OSubjectMarks", @id = "SOMarks" })
                    </div>
                    <div style="left:250px;"><h6 class="SObtMarkvalidate"></h6>
                    <h6 class="percentvalidate"></h6></div>
                    <div style="left:250px;"></div>
                </div>
    
    
    
    <script type="text/javascript">
        $(document).ready(function () {
            $('.SObtMarkvalidate').hide();
            $('.percentvalidate').hide();
            var SubOMarks_err = true;
            var percentvalidate_err = true;
    
            $('#Department').change(function () {
                debugger;
                var url = '@Url.Action("LoadDegreeProgramByDepartment", "StudentAdmission")';
                var dID = $(this).val();
                $.getJSON(url, { DepartId: dID },
                function (data) {
                    var select = $('#DegreeList');
                    select.empty();
                    select.append($('<option/>', {
                        value: 0,
                        text: "Select Degree Program"
                    }));
                    $.each(data, function (index, itemData) {
                        select.append($('<option/>', {
                            value: itemData.Value,
                            text: itemData.Text
                        }));
                    });
                });
            });
            //End Here           
    
            $('.OSubjectMarks').focusout(function () {
                PercentMarks_Check();
            });
            function PercentMarks_Check() {
                debugger;
                var SOMarks = $("#SOMarks").val();
                var STMarks = parseInt($("#STMarks").val());
             if (SOMarks != '')
                {
                    var OMarks = parseInt($("#SOMarks").val());
                    var avg = (OMarks / STMarks) * 100;
                    if (SOMarks > STMarks)
                    {
                        $('.percentvalidate').show();
                        $('.SObtMarkvalidate').hide();
                        $('.percentvalidate').html("Obtained Marks Should be Smaller than Total Marks");
                        $('#SOMarks').focus();
                        $('.percentvalidate').css("color", "red");
                        $('.percentvalidate').css({ marginLeft: '320px' });
                        percentvalidate_err = false;
                        return false;
                    }
                    else if(avg > 50.0)
                    {
                        $('.percentvalidate').hide();
                        $('.SObtMarkvalidate').hide();
                        SubOMarks_err = true;
                    }
                    else
                    {
                        $('.percentvalidate').show();
                        $('.SObtMarkvalidate').hide();
                        $('.percentvalidate').html("Your are Not Eligible! Obtain Marks should be 50%");
                        $('#SOMarks').focus();
                        $('.percentvalidate').css("color", "red");
                        percentvalidate_err = false;
                        return false;
                    }
                }
    
            }
            //End Here
    $('.btnEnrolClick').click(function () { debugger; var SubOMarks_err = true; var percentvalidate_err = true; SubjectObtMarks_Check(); PercentMarks_Check(); if((SubOMarks_err == true) && (percentvalidate_err == true)) { return true; } else { return false; } }); //End Here }); </script>

    Monday, August 26, 2019 7:07 AM

All replies

  • User283571144 posted

    Hi Ridzi,

    1- when a user selects any department and if the user does not select degree, button submit the values to the database with 0 value on degree column (user must select the degree if the degree dropdown is not empty)

    I found you append the default message for degree column with value: 0, and that why it always be 0 even you don't select a degree. I suggest you could set empty(""), if you have used the [Required] attribute in your viewmodel, or you could validate this value manually when you submit.

    function (data) {
    
                    var select = $('#DegreeList');
    
                    select.empty();
    
                    select.append($('<option/>', {
    
                        value: 0,
    
                        text: "Select Degree Program"
    
                    }));

    2- Whenever I submit, the required message show on Textbox even it degree dropdown value is selected or not. (Don't have an idea to link that textbox with dynamically created Degree dropdown list and message will only show when user select degree)

    According to your codes. I couldn't see your  validation message for textbox on Razor page. 

    Do you have the validation codes which not posted in the thread? 

    I suggest you could post the details codes about your viewmodel, the validation about the textbox and the controller action.

    Best Regards,

    Brando

    Tuesday, August 27, 2019 9:34 AM