将远程验证与HTML5验证集成

Question

我有一个使用HTML5验证的表单，我想在其中加入一些远程验证。以下是我页面上生成的相关HTML和Javascript：

<form action="/en-GB/Main/UserAdd" method="post">    <fieldset>
        <legend>Fields</legend>
        <div class="editor-label">
            <label for="Username">Username</label>
        </div>
        <div>
            <input data-val="true" data-val-remote="&#39;Username&#39; is invalid." data-val-remote-additionalfields="*.Username" data-val-remote-url="/en-GB/Validation/IsUsernameAvailable" data-val-required="The Username field is required." id="Username" name="Username" required="true" type="text" value="" />
        </div>
        <div class="editor-label">
            <label for="FirstName">FirstName</label>
        </div>
        <div class="editor-field">
            <input data-val="true" data-val-required="The FirstName field is required." id="FirstName" name="FirstName" required="true" type="text" value="" />
        </div>
        <div class="editor-label">
            <label for="Surname">Surname</label>
        </div>
        <div class="editor-field">
            <input data-val="true" data-val-required="The Surname field is required." id="Surname" name="Surname" required="true" type="text" value="" />
        </div>
        <div>
            <label for="Country">Country</label>
        </div>
        <div>
            <select data-val="true" data-val-number="The field CountryId must be a number." data-val-required="The CountryId field is required." id="CountryId" name="CountryId"><option value="1">United Kingdom</option>
<option value="2">Republic of Ireland</option>
<option value="3">Australia</option>
<option value="4">New Zealand</option>
<option value="5">United States</option>
</select>
        </div>
        <p>
            <input type="submit" value="Add User" style="font-size:11px;font-family:Verdana;font-weight:bold;" />
        </p>
    </fieldset>
    <script type="text/javascript">
        $(document).ready(function () {

            //set up buttons
            $(function () {
                $("input:submit").button();
            });

            var elementsInput = document.getElementsByTagName("input");

            for (var i = 0; i < elementsInput.length; i++) {

                elementsInput[i].oninvalid = function (e) {

                    if (!e.target.validity.valid) {

                        switch (e.target.name) {

                            case "Username":
                                e.target.setCustomValidity("Please enter a Username");
                                break;

                            case "FirstName":
                                e.target.setCustomValidity("Please enter a First Name");
                                break;

                            case "Surname":
                                e.target.setCustomValidity("Please enter a Surname");
                                    break;
                    }
                }
                    };
            elementsInput[i].oninput = function (e) {
                e.target.setCustomValidity("");
            };
        }


        });

        </script>

是否可以将data-val-remote属性合并到我的javascript中，以便我可以在HTML5验证中显示验证消息？

编辑：这是我的远程验证类：

public class ValidationController : Controller
{
    IMainRepository _repository;

    public ValidationController() : this(new MainRepository())
    {
    }

    public ValidationController(IMainRepository repository)
    {
        _repository = repository;
    }

    public static string GetAltName(string Username, IMainRepository repository)
    {

        string suggestedUID = String.Format(CultureInfo.InvariantCulture,
            "{0} is not available.", Username);

        for (int i = 1; i < 100; i++)
        {
            string altCandidate = Username + i.ToString();
            if (!repository.UsernameExists(altCandidate))
            {
                suggestedUID = String.Format(CultureInfo.InvariantCulture,
               "{0} is not available. Try {1}.", Username, altCandidate);
                break;
            }
        }

        return suggestedUID;
    }

    public JsonResult IsUsernameAvailable(string Username)
    {

        if (!_repository.UsernameExists(Username))
            return Json(true, JsonRequestBehavior.AllowGet);

        string suggestedUID = GetAltName(Username, _repository);
        return Json(suggestedUID, JsonRequestBehavior.AllowGet);
    }
}