Base solution for your next web application
Open Closed

SOLVED-MVC Dropdownlist - Client side validation not working #2783


User avatar
0
exlnt created

How can I enforce validation checking on my dropdowns?

<div class="form-group form-md-line-input">
     @Html.DropDownList("CompanyId", Model.Companies.Select(i => i.ToSelectListItem()), new { @class = "form-control edited", required = String.Empty })
    <label>@L("CompanyName2")</label>
</div>

The above dropdown is one example. This is how I implement them on most of my pages. Yet the model validation on these dropdowns does not fire or send a message to the user. It allows you to submit the form and the data is posted to the app service method, where it crashes due to this missing field.


11 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Validation on the client side does not handled automatically. You need to first call .validate on your form, see <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/master/src/MyCompanyName.AbpZeroTemplate.Web/Areas/Mpa/Views/Users/_CreateOrEditModal.js#L27">https://github.com/aspnetzero/aspnet-ze ... dal.js#L27</a>.

    Then before saving your form, you need to check if your form is valid or not <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/master/src/MyCompanyName.AbpZeroTemplate.Web/Areas/Mpa/Views/Users/_CreateOrEditModal.js#L56">https://github.com/aspnetzero/aspnet-ze ... dal.js#L56</a>.

    Thanks.

  • User Avatar
    0
    tteoh created

    FYI... Both links were broken.

  • User Avatar
    0
    exlnt created

    <cite>ismcagdas: </cite> Hi,

    Validation on the client side does not handled automatically. You need to first call .validate on your form, see <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/master/src/MyCompanyName.AbpZeroTemplate.Web/Areas/Mpa/Views/Users/_CreateOrEditModal.js#L27">https://github.com/aspnetzero/aspnet-ze ... dal.js#L27</a>.

    Then before saving your form, you need to check if your form is valid or not <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/master/src/MyCompanyName.AbpZeroTemplate.Web/Areas/Mpa/Views/Users/_CreateOrEditModal.js#L56">https://github.com/aspnetzero/aspnet-ze ... dal.js#L56</a>.

    Thanks.

    Yes I am doing that. See my code below.

    this.init = function (modalManager) {
                _modalManager = modalManager;
    
                _$form = _modalManager.getModal().find('form[name=CreateCompany]');
                _$form.validate();
            };
    
            this.save = function () {
                if (!_$form.valid()) {
                    return;
                }
    

    @ ismcagdas - I have also sent you an email on one other issue.

  • User Avatar
    0
    exlnt created

    <cite>tteoh: </cite> FYI... Both links were broken.

    Links do work, you just need to login into GIT.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @exlnt,

    Is the code you sent contains this issue as well ? If so, I will check the problem on source code.

    Thanks.

  • User Avatar
    0
    exlnt created

    <cite>ismcagdas: </cite> Hi @exlnt,

    Is the code you sent contains this issue as well ? If so, I will check the problem on source code.

    Thanks.

    Yes that source code has this same issue.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks,

    I will check it and get back to you.

  • User Avatar
    0
    exlnt created

    Have you had a chance to look into this issue?

    I have emailed you a link to the latest version of solution code and mentioned one more issue in my email.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Thanks for sending the project. I will check it today and get back to you.

    Thanks.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Thanks for sending your project again, it helped to understand the reason. Your not assigned item in dropdown is defined like this.

    <option value="null">Not assigned</option>
    

    Jquery validation engine thinks it is valid because value of option is null. So, you need to put empty string into "Not assigned" option's value.

    <option value="">Not assigned</option>
    

    This must be validated and you should do the same for all dropdown items.

    Thanks.

  • User Avatar
    0
    exlnt created

    Thanks very much, that did it!