jQuery.Validation.Unobtrusive handle sample

author(s): KatsuYuzu

by cstepaniuk

HTML

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/5.2.2/jquery.validate.unobtrusive.min.js"></script>
<form>
    <div>
        <input name="hoge" type="text" data-val-required="The field is required." data-val="true" />
        <span data-valmsg-for="hoge" data-valmsg-replace="true"></span>
    </div>
    <input type="submit" value="save" />
</form>
<ul id="console"></ul>

CSS

.input-validation-error {
    background-color: #ff0000;
}

JavaScript

$.validator.unobtrusive.options = {
    errorPlacement: function ($error, $element) {
        if ($error.text().length === 0) {
            $element.triggerHandler("onSuccess");
        } else {
            $element.triggerHandler("onError");
        }
    }
};

$("input").on("onSuccess", function () {
    $("#console").prepend("<li>onSuccess</li>");
});
$("input").on("onError", function () {
    $("#console").prepend("<li>onError</li>");
});

$(function () {
    $("form").valid();
});