client side translation

by mattopen

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col">
      <h1>"@TransResource.Contact.Headline"</h1>
                <p>Firm name and complete address</p>
                <div class="contact-detail">
                    <p><strong>@TransResource.Contact.Telephone: 0000000</strong></p>
                    <p>www.domain.com</p>
                    <p>[email protected]</p>
                </div>
    </div>
    <div class="col">
                <form class="form fv-form-bootstrap fv-form" data-fv-autofocus="" id="moContactForm" novalidate="novalidate"><button type="submit" class="fv-hidden-submit" style="display: none; width: 0px; height: 0px;"></button>
                    <div class="form-group has-feedback">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1"><i class="fa fa-envelope"></i></span>
                            </div>
                            <input type="email" class="form-control" id="Email" name="Email" placeholder="@TransResource.Contact.EmailAddress" data-fv-field="Email">
                        </div><i class="form-control-feedback fv-bootstrap-icon-input-group" data-fv-icon-for="Email" style="display: none;"></i>
                    <small class="help-block" data-fv-validator="notEmpty" data-fv-for="Email" data-fv-result="NOT_VALIDATED" style="display: none;">Email address is...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var StringResource = {
    "Contact.CompanyName": "Company",
    "Contact.CompanyNameLengthExceed": "Company name length exceeds 500 characters",
    "Contact.CompanyNameRequired": "Company name is required",
    "Contact.EmailAddress": "Email address",
    "Contact.EmailAddressInvalid": "Email address is invalid",
    "Contact.EmailAddressRequired": "Email address is required",
    "Contact.EmailLengthExceed": "Email length exceeds 256 characters",
    "Contact.EmailSendSuccessfully": "Email send successfully",
    "Contact.FirstName": "First Name",
    "Contact.FirstNameLengthExceed": "First name length exceeds 50 characters",
    "Contact.FirstNameRequired": "First name is required",
    "Contact.LastName": "Last Name",
    "Contact.Headline": "Contact",
    "Contact.Description": "please leaf us a message...?",
    "Contact.DescriptionLimitExceed": "Description length exceeds 5000 characters",
    "Contact.DescriptionRequired": "Description is required",
    "Contact.Teasertext": "Please leaf us a message <b>bold text</b>",
    "Contact.Telephone": "Telephone",
    "Contact.Send": "Send",
    "FooterGroup1": "This is us",
    "FooterGroup2": "legal stuff",
    "Page.Home": "Start",
    "Page.Impressum": "Imprint",
    "Page.Copyright": "Copyright",
    "Page.DataProtection": "Privacy",
    "Page.Contact": "Contact",
    "TextOverlayOverImage": "Lorem ipsum dolor sit amet DE",
    "TextOverlayOverImage.Index": "Das smarte Zahnbleaching-Studio",
    "TextOverlayOverImage.Impressum": "Impressum hier kommt ein Text",
    "TextOverlayOverImage.Privacy": "Privacy hier kommt ein Text",
    "ThankYou": "Thank you",
    "Language.en": "English",
    "Language.de": "German"
};

var
    getLocalResource = function (key) {
        try {
            var retVal = key;
            retVal = StringResource[retVal] === null || StringResource[retVal] === undefined ? retVal : StringResource[retVal];
            return retVal;
        }
        catch (err) {
           ...