Forms

Form Javascript

Methods

formValidation()

Runs the form validation and adds error messages or runs successful function.

					
let forms = new forms4i(),

validateForm = e => {
	e.preventDefault();
	forms.formValidation(document.getElementById("styleGuideForm"), formValidationSuccess, e);
},

formValidationSuccess = () => {
	let successMsg = '<p class="text20 textSemiBold displayFlex flexAlignItemsCenter"><svg class="textDarkestGray roundCorners5 bkgdGreen" height="30px" width="30px" focusable="false" aria-hidden="true"><use xlink:href="#svgIcon-checkMark"></use></svg> <span class="marginLeft5">Your form submitted successfully!</span></p>';
	document.getElementById("styleGuideForm").classList.add("hide");
	document.getElementById("styleGuideForm").insertAdjacentHTML("afterend", successMsg);
}; 

btn.addEventListener("click", validateForm);
serverValidation()

Runs the form server validation and adds error messages for customer attributes in VS models.

forms.serverValidation(document.getElementById("styleGuideForm"));
ClearValidation()

Removes error message box, CSS, and accessibility components related to invalid fields.

forms.ClearValidation();
InvalidateField()

Allows the ability to add custom validation to your javascript file.

let errorList = ["Please enter a valid number"];
forms.InvalidateField(formEl, targetEl, errorList);
FadeCCImgs()

Initiates validation as user is typing credit card number. cardName can be null.

let cardNum = document.getElementById("cardNumElem"),
btnElement = document.getElementById("btnElem"),
cardName = document.getElementById("savedNameElem");

forms.FadeCCImgs(cardNum, btnElement, cardName);
MaskCCNumber()

Adds a mask to credit card number - ie. spaces after 4-digit increments.

let ccMask = document.getElementById("ccMaskElem"),
cardNumber = document.getElementById("cardNumElem");

forms.MaskCCNumber(ccMask, cardNumber);
MaskCVVNumber()

Formats the CVV input field so numbers typed in follow the format on a credit card.

let cvvMask = document.getElementById("cvvMaskElem"),
cvvNumber = document.getElementById("cvvElem");

forms.MaskCVVNumber(cvvMask, cvvNumber);
MaskPhoneNumber()

Formats the phone number input field so numbers typed in follow the phone number format.
Must also include '/javascript/vanilla-masker.js' file in the bundle before the forms2021.js file.

let phoneMask = document.getElementById("phoneMask"),
phoneNumber = document.getElementById("PhoneNumber");

forms.MaskPhoneNumber(phoneMask, phoneNumber);
UnmaskCCNumber()

Removes any masking from Credit Card Number (may be necessary before form submission)

forms.UnmaskCCNumber(document.getElementById("cardNumElem"));
GetCreditCardName()

Provides name of credit card based on First Digit of Card Number.

forms.GetCreditCardName(cardNumber));
ShowSaveCardName()

Updates HTML and CSS for 'Saved Card' and 'Is Default' options for credit cards.
Param 3: Null can be passed in if the 'IsDefault' checkbox does not exist.

let savedCheck = document.getElementById("isSavedElem"),
savedName = document.getElementById("savedNameElem"),
isDefault = document.getElementById(isDefaultElem);

forms.ShowSaveCardName(savedCheck, savedName, isDefault);
BindPasswordButtons()

Binds events for showing/hiding the password field.

forms.BindPasswordButtons();
Notes

See Form Component.

Read the form standardization documentation .

Read the form abandonment logging documentation .

Resources

Sass File(s)/sass/components/_flexform2018.scss
JS File(s)/library/forms2021.js and/or
/library/formcreditcards.js
JS FunctionsSee Above
Locale Keys/ecommerce/forms
/secure/registration/creditcard

Accessibility

None at this time.

To Top