Forms and Validations

      
          <isdecorate template="common/layout/page">
    <isscript>
        var assets = require('*/cartridge/scripts/assets.js');
        assets.addJs('/js/productTile.js');
        assets.addCss('/css/homePage.css');
    </isscript>

    <div class="home-main homepage">
        <isslot id="home-main-m" description="Main home page slot." context="global" />
    </div>

    <div class="container home-categories homepage">
        <div class="row home-main-categories no-gutters">
            <isslot id="home-categories-m" description="Categories slots on the home page." context="global" />
        </div>
    </div>

    <div class="container home-product-tiles homepage">
        <div class="hp-product-grid" itemtype="http://schema.org/SomeProducts" itemid="#product">
            <isslot id="home-products-m" description="Product tiles on the home page." context="global" />
        </div>
    </div>

    <div class="homepage shop-the-style">
        <isslot id="home-product-set-m" description="Link to a Product Set." context="global" />
    </div>

    <div class="home-email-signup">
        <div class="container">
            <div class="row">
                <div class="col-sm-5">
                    <div class="input-group">
                        <isinclude template="home/components/newsletterForm" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</isdecorate>
        

      
          <?xml version="1.0"?>

<form
    xmlns="http://www.demandware.com/xml/form/2008-04-19"
    validation="${require('~/cartridge/scripts/forms/validate/newsletterFormCustomValidate').validate(formgroup);}">
    <field
        formid="firstName"
        label="label.input.firstname.profile"
        type="string"
        mandatory="false"
        binding="firstName"
        max-length="50"
        missing-error="error.message.required"
        range-error="error.message.lessthan50"
    />

    <field
        formid="email"
        label="label.input.email.profile"
        mandatory="true"
        max-length="50"
        regexp="^[\w.%+-]+@[\w.-]+\.[\w]{2,6}$"
        missing-error="error.message.required"
        parse-error="error.message.parse.email.profile.form"
        range-error="error.message.lessthan50"
        type="string"
    />

    <field
        formid="subscribeToSecondEmailList"
        label="description.checkbox.newsletter.subscribe.to.additional.service"
        type="boolean"
    />

    <action formid="subscribe" label="button.form.subscribe" valid-form="true"/>
</form>
        

      
          /* eslint-disable no-undef */

exports.validate = function (form) {
  if (form.subscribeToSecondEmailList.checked && empty(form.firstName.value)) {
    form.firstName.invalidateFormElement('error.firstname.reqired.to.subscribe.to.additional.list');
    return false;
  }

  return true;
};
        

      
          'use strict';
const server = require('server');

server.extend(module.superModule);
server.append('Show', function (req, res, next) {
  const URLUtils = require('dw/web/URLUtils');
  const newsletterForm = server.forms.getForm('newsletter');
  newsletterForm.clear();

  res.setViewData({
    formActions: {
      newsletter: URLUtils.https('EmailSubscribe-Subscribe').toString()
    },
    forms: {
      newsletter: newsletterForm
    }
  });

  next();
});

module.exports = server.exports();
        

      
          <form
    action="${pdict.formActions.newsletter}"
    class="newsletter-form js-newsletter-form"
    method="POST"
    <isprint value=${pdict.forms.newsletter.attributes} encoding="off" />>

    <isscript>
        let emailRequired = pdict.forms.newsletter.email.mandatory === true;
    </isscript>

    <div class="form-group ${emailRequired ? 'required' : ''}">
        <isprint value="${pdict.forms.newsletter.email.label}" encoding="htmlcontent" />
        <input
            type="text"
            class="form-control"
            autocomplete="off"
            id="${pdict.forms.newsletter.email.htmlName}"
            ${emailRequired ? ' required ' : ''}
            data-range-error="${Resource.msg('error.message.lessthan50', 'forms', null)}"
            data-missing-error="${Resource.msg('error.message.required', 'forms', null)}"
            data-pattern-mismatch="${Resource.msg('error.message.parse.email.profile.form','forms',null)}"
            aria-describedby="form-newsletter-email-error"
            <isprint value=${pdict.forms.newsletter.email.attributes} encoding="off" />>
        <div class="invalid-feedback" id="form-newsletter-email-error"></div>
    </div>

    <isscript>
        let fnameRequired = pdict.forms.newsletter.firstName.mandatory === true;
    </isscript>

    <div class="form-group ${fnameRequired ? 'required' : ''}">
        <isprint value="${pdict.forms.newsletter.firstName.label}" encoding="htmlcontent" />
        <input
            type="text"
            class="form-control"
            autocomplete="off"
            id="${pdict.forms.newsletter.firstName.htmlName}"
            ${fnameRequired ? ' required ' : ''}
            data-missing-error="${Resource.msg('error.message.required', 'forms', null)}"
            data-range-error="${Resource.msg('error.message.lessthan50', 'forms', null)}"
            aria-describedby="form-newsletter-fname-error"
            <isprint value=${pdict.forms.newsletter.firstName.attributes} encoding="off" />>
        <div class="invalid-feedback" id="form-newsletter-fname-error"></div>
    </div>

    <div class="form-group custom-control custom-checkbox">
        <input
            type="checkbox"
            class="custom-control-input"
            value="true"
            name="${pdict.forms.newsletter.subscribeToSecondEmailList.htmlName}"
            id="${pdict.forms.newsletter.subscribeToSecondEmailList.htmlName}"
        />

        <label class="custom-control-label" for="${pdict.forms.newsletter.subscribeToSecondEmailList.htmlName}">
            <isprint value="${pdict.forms.newsletter.subscribeToSecondEmailList.label}" encoding="htmlcontent" />
        </label>
    </div>

    <button type="submit"
        name="${pdict.forms.newsletter.subscribe.htmlName}"
        class="btn btn-primary">
        <isprint value="${Resource.msg(pdict.forms.newsletter.subscribe.label, 'forms', null)}" encoding="htmlcontent" />
    </button>

    <div class="email-description">${Resource.msg('description.form.emailsignup', 'homePage', null)}</div>
</form >
        

      
          description.checkbox.newsletter.subscribe.to.additional.service=Subscribe to additional 3rd party service
error.firstname.reqired.to.subscribe.to.additional.list=First name is required to subscribe to additional service
button.form.subscribe=Subscribe
        

      
          window.jQuery = window.$ = require('jquery');
const processInclude = require('base/util');

$(document).ready(function () {
  processInclude(require('base/components/menu'));
  processInclude(require('base/components/cookie'));
  processInclude(require('base/components/consentTracking'));
  processInclude(require('./components/footer'));
  processInclude(require('base/components/miniCart'));
  processInclude(require('base/components/collapsibleItem'));
  processInclude(require('base/components/search'));
  processInclude(require('base/components/clientSideValidation'));
  processInclude(require('base/components/countrySelector'));
  processInclude(require('base/components/toolTip'));
});

require('base/thirdParty/bootstrap');
require('base/components/spinner');
        

      
          'use strict';
const $ = window.$;
const scrollAnimate = require('base/components/scrollAnimate');
const formValidation = require('base/components/formValidation');
let emailSignupT = null;

function displayMessage(data, $form) {
  const $button = $form.find('.js-submit-btn');
  let status = data.success ? 'alert-success' : 'alert-danger';
  let $emailSignupMsg = $('.email-signup-message');

  $.spinner().stop();

  if (!$emailSignupMsg.length) {
    $('body').append('<div class="email-signup-message"></div>');
    $emailSignupMsg = $('.email-signup-message');
  }

  $emailSignupMsg.html('<div class="email-signup-alert text-center ' + status + '">' + data.msg + '</div>');

  clearTimeout(emailSignupT);

  emailSignupT = setTimeout(function () {
    $emailSignupMsg.remove();
    $button.removeAttr('disabled');
  }, 3000);
}

module.exports = function () {
  $('.js-newsletter-form').on('submit', function (e) {
    e.preventDefault();
    $.spinner().start();

    const $form = $(this);
    const $submitBtn = $form.find('.js-submit-btn');

    $submitBtn.attr('disabled', true);

    $.ajax({
      url: $form.attr('action'),
      type: $form.attr('method'),
      data: $form.serialize(),
      success: function (data) {
        formValidation($form, data);
        displayMessage(data, $form);
      },
      error: function (err) {
        formValidation($form, err);
        displayMessage(err, $form);
      }
    });
  });

  $('.back-to-top').on('click', scrollAnimate);
};
        

      
          'use strict';
const server = require('server');

server.extend(module.superModule);
server.replace('Subscribe', function (req, res, next) {
    const Resource = require('dw/web/Resource');
    const newsletterForm = server.forms.getForm('newsletter');
    const formErrors = require('*/cartridge/scripts/formErrors');
    const hooksHelper = require('*/cartridge/scripts/helpers/hooks');

    res.json({
        success: false,
        fields: formErrors.getFormErrors(newsletterForm),
        msg: Resource.msg(
            newsletterForm.firstName.valid ? 'subscribe.email.invalid' : 'error.firstname.reqired.to.subscribe.to.additional.list', 'forms', null
        )
    });

    if (newsletterForm.valid) {
        hooksHelper('app.mailingList.subscribe', 'subscribe', [newsletterForm.email.value], function () {});
        res.json({
            success: true,
            msg: Resource.msg('subscribe.email.success', 'homePage', null)
        });

        return next();
    }

    return next();
});

module.exports = server.exports();