How to have no validation when selecting a value on dropdown

[Marc]

On this form it defaults to a committee type when first landing on page. When I select another committee type the form validates for all of the blank fields that are required. I don’t want the form to do this. I am trying to figure out a way so those fields don’t validate when I select another committee type in the dropdown in the javascript.  Currently when I debug it doesn't get to the post action method in the controller for obvious reasons that the form validates before even getting into the controller. 

If you need to see more code like the action method in controller I can provide that as well.

Full View

<div class="row">
    <div class="col-md-7 order-md-8">
        <input asp-for="LinkId" type="hidden" />
        <div class="row">
            <div class="col-md-12">
                <h2 class="text-info">@ViewData["Title"]</h2>
                <hr />
                <div class="row">
                    <div class="col-md-12">                        
                        <form id="form-create-link"
                              method="post"
                              asp-controller="Link"
                              asp-area="Admin"
                              asp-action="CreateLink">

                            <div id="add-link">
                                <partial name="_AddEditLink" model="@Model" />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-2 col-md-4 order-md-4">
        @{
            var linkMenuViewModel = new LinkMenuViewModel
            {
                LinkMenu = LinkMenu.ManageLinkCategories,
                LinkId = Model.LinkId
            };
            @await Component.InvokeAsync("LinkSideBarComponent", linkMenuViewModel);
        }
    </div>
</div>

Partial View

<div class="form-group col-md-8">
    <div asp-validation-summary="All" id="validation-error" class="text-danger custom-validation-summary"></div>
</div>

<input id="link-id" asp-for="@Model.LinkId" type="hidden" />
<input name="FetchCategories" type="hidden"/>
<div class="form-group col-md-8 col-lg-4">
    <div class="form-group">
        @{
            var authorizedCommitteeTypes = await Model.CommitteeType
                .ToSelectListAsync(AuthorizationService, User, AuthRequirements.AdminCommitteeType);

            if (authorizedCommitteeTypes.Count == 1)
            {
                <input id="committeeType" name="committeeType" type="hidden" value="@authorizedCommitteeTypes.FirstOrDefault()?.Value" />
            }
            else
            {
                <label class="control-label">Committee Type</label>
                <select id="add-edit-committee-type"
                        name="committeeType"
                        asp-for="@Model.CommitteeType"
                        asp-items="@authorizedCommitteeTypes"
                        class="form-control">
                </select>
            }
        }
    </div>
</div>
<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Category</label>
    @{
        if (Model != null && Model.AvailableCategories != null)
        {
            var availableCategories =
                new SelectList(
                    Model.AvailableCategories.OrderBy(c => c.Order),
                    dataValueField: "CategoryId",
                    dataTextField: "Title",
                    selectedValue: Model.CategoryId);

            <select id="dropdown-linkCategories" required
                    asp-for="@Model.CategoryId"
                    asp-items="@availableCategories"
                    class="form-control">
                <option>-- Select --</option>
            </select>
        }
        else
        {
            <select id="dropdown-linkCategories"
                    class="form-control">
                <option>-- Select --</option>
            </select>
        }
    }
</div>


<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Title</label>
    <input id="title" asp-for="Title" name="Title" class="form-control" />
</div>

<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">Display Order</label>
    <div>
        <input id="order" asp-for="Order" name="Order" class="form-control" />
    </div>
</div>

<div class="form-group col-md-8 col-lg-4">
    <label class="control-label">URL</label>
    <input id="url" asp-for="URL" name="URL" class="form-control" />
</div>

<div class="form-group col-md-8 col-lg-12">
    <label class="control-label">Description</label>
    <textarea class="rtextDescription" name="Description" id="Description" row="1" cols="60"
              data-val-maxlength-max="200" asp-for="Description"
              data-val-maxlength="Max length for Description is 200"></textarea>
</div>

    @{

        if (Model.LinkId == 0)
        {
            <div class="form-group col-md-12">
                <input type="submit" id="link-submit"
                       class="btn btn-forum col-sm-12 col-md-2 col-lg-2"
                       value="Add" />
                <a asp-area="Admin"
                   asp-controller="Link"
                   asp-action="Index"
                   class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
            </div>
        }
        else
        {
            <div class="form-group col-md-8 col-lg-12">
                <input type="submit" value="Save" id="edit-submit"
                       class="btn btn-forum col-sm-12 col-md-2 col-lg-2" />

                <a asp-area="Admin"
                   asp-controller="Link"
                   asp-action="Index"
                   class="btn btn-forum col-sm-12 col-md-2 col-lg-2">Back to Links</a>
            </div>
        }
    }

JS

$(document).on("change", "#form-create-link #add-edit-committee-type", function () {
    $('input[name="FetchCategories"]').val(true);  
    $(this).closest('form').submit()
});

[Marc]

Anyone with any ideas on this. It would be greatly appreciated

[Prince Oliver]

Hi Marcus,  

  

Greetings from Syncfusion support,  

  

Based on your update, we suspect that you want to remove the dropdown validation for the value change. So, we suggest you ignore the validation for the use of jquery validation ignore feature.  

  

Please find the code example here: 

 

$('#CategoryId').change(function () {  

        var val = $(this).val();          

        if (val == "1") {  

            $("form").validate().settings.ignore = ".myvalidationgroup";  

        }  

        $('form').submit();  

    });  

  

  

To know more about jQuery ignore, please refer the stack overflow page: https://stackoverflow.com/questions/22613983/jquery-validate-ignore-and-more    

  

Regards,  

Prince 

1