CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3
Zach L
Zach L

Reputation: 1275

MVC3 - jQuery unobtrusive validation using a custom attribute

I'm having a hard time grasping MVC3 using jQuery unobtrusive validation.

I have a form where I need the user to enter at least one field before making the POST request.

I followed Darin Dimitrov's Answer Here pretty heavily, but I can't seem to figure out what I need to do to stop the form from submitting, if no fields have values.

Custom Attribute:

Public Class AtLeastOneRequiredAttribute
Inherits ValidationAttribute
Implements IClientValidatable

Private ReadOnly _properties As String()

Public Sub New(ByVal properties As String())
    _properties = properties
End Sub

Protected Overrides Function IsValid(value As Object, validationContext As ValidationContext) As ValidationResult
    If IsNothing(_properties) Or _properties.Length < 1 Then
        Return Nothing
    End If

    For Each prop In _properties
        Dim propertyInfo = validationContext.ObjectType.GetProperty(prop)
        If IsNothing(propertyInfo) Then
            Return New ValidationResult(String.Format("unknown property {0}", prop))
        End If

        Dim propertyValue = propertyInfo.GetValue(validationContext.ObjectInstance, Nothing)
        If TypeOf propertyValue Is String AndAlso Not String.IsNullOrEmpty(propertyValue.ToString) Then
            Return Nothing
        End If

        If Not IsNothing(propertyValue) Then
            Return Nothing
        End If
    Next

    Return New ValidationResult(FormatErrorMessage(validationContext.DisplayName))
End Function

Public Function GetClientValidationRules(metadata As ModelMetadata, context As ControllerContext) As IEnumerable(Of ModelClientValidationRule) Implements IClientValidatable.GetClientValidationRules
    Dim result = New List(Of ModelClientValidationRule)
    Dim rule As New ModelClientValidationRule
    rule.ErrorMessage = ErrorMessage
    rule.ValidationType = "atleastonerequired"

    rule.ValidationParameters("properties") = String.Join(",", _properties)

    result.Add(rule)

    Return result
End Function
End Class

Model:

<AtLeastOneRequired({"FieldA", "FieldB", "FieldC"}, ErrorMessage:="Testing")> _
Public Property FieldA As String
Public Property FieldB As String
Public Property FieldC As String

View:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

jQuery.validator.unobtrusive.adapters.add(
    'atleastonerequired', ['properties'], function (options) {
        options.rules['atleastonerequired'] = options.params;
        options.messages['atleastonerequired'] = options.message;
    }
);

jQuery.validator.addMethod('atleastonerequired', function (value, element, params) {
    var properties = params.properties.split(',');
    var values = $.map(properties, function (property, index) {
        var val = $('#' + property).val();
        return val != '' ? val : null;
    });
    return values.length > 0;
}, '');


@Using Html.BeginForm("Results", "List")
@Html.ValidationSummary(False)
    @<div>
        @Html.LabelFor(Function(model) model.FieldA)
        @Html.EditorFor(Function(model) model.FieldA)
    </div>
    @<div>
        @Html.LabelFor(Function(model) model.FieldB)
        @Html.EditorFor(Function(model) model.FieldB)
    </div>
    @<div>
        @Html.LabelFor(Function(model) model.FieldC)
        @Html.EditorFor(Function(model) model.FieldC)
    </div>
    @<p>
        <input type="submit" value="Search" />
    </p>
End Using

Upvotes: 2

Views: 903

Answers (1)

Zach L
Zach L

Reputation: 1275

The code above actually works, but I tried simplifying my code for a demonstration and that's where the bug existed. Lesson learned.

Actual View code:

@<div class="ui-widget">
    @Html.LabelFor(Function(model) model.CategoryID)
    <input class="text-box single-line" id="Category" name="Category" type="text" value="" />
</div>
@<div class="ui-widget">
    @Html.LabelFor(Function(model) model.Manufacturer)
    @Html.EditorFor(Function(model) model.Manufacturer)
</div>
@<div>
    @Html.LabelFor(Function(model) model.aModel)
    @Html.EditorFor(Function(model) model.aModel)
</div>

Actual Model:

<Display(Name:="Category")> _
<AtLeastOneRequired({"CategoryID", "Manufacturer", "aModel"}, ErrorMessage:="Testing")> _
Public Property CategoryID As String
Public Property Manufacturer As String
<Display(Name:="Model")> _
Public Property aModel As String

Earlier I was messing with jQuery Autocomplete and I manually set up the textbox instead of using the HTML Helpers. Then I had my Custom Attribute assigned to my CategoryID property. When I moved my AtLeastOneRequried attribute to another property like Manufacturer or Model, it worked.

Remember to tie your custom attribute to a property using an HTML Helper, otherwise it doesn't get rendered right in the source code.

Upvotes: 1

Related Questions