Validation.cshtml

@model JobApplication
@using System.Globalization
@inject IStringLocalizer<SharedResource> loc

@{
    Layout = "_Layout";
    ViewData["Title"] = "Job Application";
}

<h2>Job Application</h2>

<article>
    <p>Localization:</p>
    <p>-Startup.cs (setup)</p>
    <p>-.resx</p>
    <p>-DataAnnotations + Custom validation attributes</p>
    <p>-jQuery validate + Custom validation methods</p>
    <p>-https://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html</p>
</article>

The following is localized text: <h3 style="display:inline">
    @loc["hello"]
</h3>

<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<form class="m-1 p-1" method="post">
    <div class="form-group">
        <label asp-for="Name"></label>
        @*<input asp-for="Name" class="form-control" />*@
        @Html.TextBoxFor(m => m.Name, new { asp_validation_for = "Name", @class = "form-control" })
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="DOB"></label>
        @*<input asp-for="DOB" type="date" asp-format="{0:d}" class="form-control" />*@
        @Html.TextBoxFor(m => m.DOB, "{0:yyyy-MM-dd}", new { asp_validation_for = "DOB", type = "date", @class = "form-control" })

        <span asp-validation-for="DOB" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Email"></label>
        @*<input asp-for="Email" type="text" class="form-control" />*@
        @Html.TextBoxFor(m => m.Email, new { asp_validation_for = "Email", type = "text", @class = "form-control" })
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <div class="form-group">
        @*<label asp-for="Sex"></label>*@
        @Html.LabelFor(m => m.Sex)
        <div>
            @*<input asp-for="Sex" type="radio" value="M" />Male
                <input asp-for="Sex" type="radio" value="F" />Female*@
            @Html.RadioButtonFor(m => m.Sex, "M", new { asp_validation_for = "Sex", Text = "M" }) @loc["SexM"].Value
            @Html.RadioButtonFor(m => m.Sex, "F", new { asp_validation_for = "Sex", Text = "F" }) @loc["SexF"].Value

        </div>

        <span asp-validation-for="Sex" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Price"></label>
        <div>
            @*<input asp-for="Price" id="price" type="text" value="" />*@
            @Html.TextBoxFor(m => m.Price, new { asp_validation_for = "Price", type = "text" })

        </div>
        <span asp-validation-for="Price" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Experience"></label>
        @Html.DropDownListFor(m => m.Experience, Model.ExperienceSelectOptions, new { @class = "form-control" })
        @*<select asp-for="Experience" class="form-control">
                <option value="Select">Select</option>
                <option value="0">Fresher</option>
                <option value="1">0-1 years</option>
                <option value="2">1-2 years</option>
                <option value="3">2-3 years</option>
                <option value="4">3-4 years</option>
                <option value="5">4-5 years</option>
            </select>*@
        <span asp-validation-for="Experience" class="text-danger"></span>
    </div>
    <div class="form-group">
        @*<input asp-for="TermsAccepted" />*@
        @Html.CheckBoxFor(m => m.TermsAccepted)
        @Html.LabelFor(m => m.TermsAccepted, new { @class = "form-check-label", Value = "  I accept the terms & conditions" })
        @*<label asp-for="TermsAccepted" class="form-check-label">
                I accept the terms & conditions
            </label>*@
        <span asp-validation-for="TermsAccepted" class="text-danger"></span>
    </div>

    <button type="submit" class="btn btn-primary">Submit Application</button>
</form>

@section scripts {

    <!-- jQuery.validate.js  +  jquery.unobtrusive.js -->
    @await Html.PartialAsync("_ValidationScriptsPartial.cshtml")

    <!-- Globlize-Configuration-Tool:
          http://johnnyreilly.github.io/globalize-so-what-cha-want/#/?currency=true&date=true&message=false&number=true&plural=false&relativeTime=false&unit=false  -->

    <script src="~/js/cldr.js"></script>
    <script src="~/js/cldr/event.js"></script>
    <script src="~/js/cldr/supplemental.js"></script>

    <script src="~/js/globalize.js"></script>
    <script src="~/js/globalize/number.js"></script>
    <script src="~/js/globalize/plural.js"></script>
    <script src="~/js/globalize/currency.js"></script>
    <script src="~/js/globalize/date.js"></script>


    <script>

        // How to load globalize.js: https://github.com/globalizejs/globalize/blob/master/doc/cldr.md
        var locale = "@System.Threading.Thread.CurrentThread.CurrentCulture.Parent";
        console.log(`Current culture: ${locale}`);

        $.when(
            $.get("/js/supplemental/likelySubtags.json"),
            $.get("/js/main/" + locale + "/numbers.json"),
            $.get("/js/supplemental/numberingSystems.json"),
            $.get("/js/supplemental/plurals.json"),
            $.get("/js/supplemental/ordinals.json"),
            $.get("/js/main/" + locale + "/currencies.json"),
            $.get("/js/supplemental/currencyData.json"),

            $.get("/js/main/" + locale + "/ca-gregorian.json"),
            $.get("/js/main/" + locale + "/timeZoneNames.json"),
            $.get("/js/supplemental/timeData.json"),
            $.get("/js/supplemental/weekData.json")
        ).then(function () {

            // Normalize $.get results, we only need the JSON, not the request statuses.
            return [].slice.apply(arguments, [0]).map(function (result) {
                return result[0];
            });

        }).then(Globalize.load).then(function () {

            // Globalize-API: https://github.com/globalizejs/globalize#dateformatter-options-
            Globalize.locale(locale); // global
             de = Globalize("de"); // get globalized instance: de.formatDate(new Date());

            $.when($.get("/js/jQuery.Validate.Globalize_1.0.js")).then(() => {
                // now jquery.validate uses Globalize for parsing, checkout file: jQuery.Validate.Globalize_1.0.js

                // Your code goes here.
            });
            
            console.log(`Currency in ${locale}: `+ Globalize.formatCurrency(parseInt($("#Price").val()), "EUR"));
            console.log(`Date in ${locale}: `+ Globalize.formatDate(new Date()));
        });
        var de;
    </script>

    <script>


        @{ // Get the CurrencyDecimalSeparator for the selected culture for validation
             var decSep = @CultureInfo.CurrentCulture.NumberFormat.CurrencyDecimalSeparator;
             var separator = decSep.Equals(".") ? @"\." : decSep;

        }
        //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        //################################################################################################
        // DON'T PUT YOUR CUSTOM jquery VALIDATION METHODS BELOW INSIDE OF document.ready --> THIS WILL NOT WORK !
        // https://stackoverflow.com/questions/24763876/why-do-custom-unobtrusive-validator-methods-have-to-be-added-before-document-rea?lq=1
        // https://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
        //################################################################################################
        //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

        // client side validation method ++++++++++++++++++++++++++++  -> counterpart of MustBeTrueAttribute.cs
        $.validator.addMethod("mustbetrue",
            function (value, element, parameters) {
                return value ? true : false;
            });

        $.validator.unobtrusive.adapters.add("mustbetrue", [], function (options) {
            options.rules.mustbetrue = {};
            options.messages["mustbetrue"] = options.message;
        });

         // client side validation method ++++++++++++++++++++++++++++  -> counterpart of NameValidateAttribute.cs
         $.validator.addMethod("namevalidate",
            function (value, element, parameters) {
                return ["Osama Bin Laden", "Saddam Hussain", "Mohammed Gaddafi"].indexOf(value) < 0;
            });

        $.validator.unobtrusive.adapters.add("namevalidate", [], function (options) {
            options.rules.namevalidate = {};
            options.messages["namevalidate"] = options.message;
        });


        // client side validation method  ++++++++++++++++++++++++++++  -> counterpart of CurrencyMustMeetCultureAttribute.cs
        $.validator.addMethod("currencymustmeetculture",
            function (value, element, parameters) {
                var regex = /^\d{1,}@separator?\d{0,2}$/
                var res = regex.test(value);
                return res;
        });

        $.validator.unobtrusive.adapters.add("currencymustmeetculture", [], function (options) {
            options.rules.currencymustmeetculture = {};
            options.messages["currencymustmeetculture"] = options.message;
        });



        $(document).ready(() => {
            // this removes the IsNumber validation rule for this input field
            // this validation generates a not changeable english error message, not localized, therefore we remove it.
            $('#Price').rules('remove', 'number');

        });

    </script>


}







<style>
    .input-validation-error {
        border-color: red;
    }
</style>