CODEWITHSUNDEEP
jqueryvalidationasp.net-mvc-4
ksg
ksg

Reputation: 4067

Jquery Unobstrusive validation : Array must contain 1 element

I have the following viewmodel definition.My scenario is that array must contain atleast one item else error must be shown.

public class GroupVM
{
    [Required(ErrorMessage="Please enter GroupName")]
    public string GroupName { get; set; }

    [RequiredArray(ErrorMessage="Please select Centre Code")]
    public int[] CentreCodeId { get; set; }
    public SelectList CentreCodeList { get; set; }

    public DateTime TransactionDate { get; set; }
}

I have performed the server side validation and its working fine,but client side validation is not working.

public class RequiredArray : ValidationAttribute,IClientValidatable
{
    public override bool IsValid(object value)
    {
        var list = value as IList;
        if (list != null)
        {
            return list.Count > 0;
        }
        return false;
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ValidationType = "emptyarray",
            ErrorMessage = this.ErrorMessage
        };            
        yield return rule;
    }
}

Client side script is as follows 

<script type="text/javascript">
$(function () {
    jQuery.validator.addMethod("emptyarray", function (value, element, param) {
        if (element.value == null) {
            return false;
        }
        return true;
    });
    jQuery.validator.unobtrusive.adapters.addBool("emptyarray");


})

Razor View is as follows

  @Html.ListBoxFor(m => m.CentreCodeId
                        , Model.CentreCodeList
                        , new { @class = "form-control select2 courseList", @id = "ddlCentreCode" })
  @Html.ValidationMessageFor(m => m.CentreCodeId)

HTML Markup is as follows

<select class="form-control select2 courseList valid" data-val="true" data-val-emptyarray="Please select centre code" id="ddlCentreCode" multiple="multiple" name="CentreCodeId"><option value="5">NSTAJ001</option>
<option value="6">NSTVJ002</option>
<option value="7">NSNVY004</option>
<option value="8">NSTDJ005</option>
</select>

Any idea why the client side validation is not working.

Upvotes: 0

Views: 335

Answers (1)

user3559349
user3559349

Reputation:

You need to remove the surrounding $(function () { (the scripts just need to be inside <script> tags and after the jquery.validate* scripts, and you also need to check for and empty string, not null

<script src="/Scripts/jquery-{version}.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<script type="text/javascript">
    jQuery.validator.addMethod("emptyarray", function (value, element, param) {
        if (element.value === "") { // change
            return false;
        }
        return true;
    });
    jQuery.validator.unobtrusive.adapters.addBool("emptyarray");
</script>

Side note: I am assuming var list = value as IList; is a typo (it would throw an exception) and its really var list = value as IList<int>;

Upvotes: 1

Related Questions