Question

On client I create some inputs, for example:

var title = document.createElement('input');
title.setAttribute('type', 'text');
title.setAttribute('name', 'Title');
myForm.appendChild(title);

This field should be required. How can I do this validation?

Answer 1

How can I do this validation?

You should apply HTML5 data-* attributes to it that are used by the jquery unobtrusive validation and then call jQuery.validator.unobtrusive.parse to force the plugin reparse the rules that have been dynamically added:

var title = document.createElement('input');
title.setAttribute('type', 'text');
title.setAttribute('id', 'Title');
title.setAttribute('name', 'Title');
title.setAttribute('data-val', 'true');
title.setAttribute('data-val-required', 'This field is required');
myForm.appendChild(title);

$(myForm).removeData("validator");
$(myForm).removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(myForm);

Also notice that you might want to provide a corresponding <span> element that will be used to display the error message unless you are using the Html.ValidationSummary helper to centralize all error messages in a single location. This element should look like this:

<span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>

which could be written in a more jQueryish way:

$(function () {
    $.validator.unobtrusive.parse(
        $('form').append(
            $('<input/>', {
                type: 'text',
                id: 'Title',
                name: 'Title'
            })
            .attr('data-val', 'true')
            .attr('data-val-required', 'This field is required')
        )
        .append(
            $('<span/>')
                .addClass('field-validation-valid')
                .attr('data-valmsg-for', 'Title')
                .attr('data-valmsg-replace', 'true')
        )
        .removeData('validator')
        .removeData('unobtrusiveValidation')
    );
});