Input Validation

Copy source code

const TRIGGER_VALUE = ['twik'];
const RESPONSE_VALUES = ['correctOption1', 'correctOption2', 'correctOption3', 'correctOption4'];
const css = `
.twik-variant-popup-container {
position: fixed;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.36);
}
.twik-variant-actual-popup {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
max-width: 260px;
margin-right: 18px;
margin-left: 18px;
padding: 24px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 2px;
background-color: #fff;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
text-align: center;
}
.twik-variant-title {
margin-top: 8px;
margin-bottom: 8px;
}
.twik-variant-select-field {
width: 100%;
margin-bottom: 0px;
}
.twik-variant-icon {
width: 56px;
height: 56px;
}
.twik-variant-p {
margin-bottom: 36px;
}
.twik-variant-popup-close {
position: absolute;
width: 18px;
height: 18px;
opacity: 0.44;
}
.twik-variant-paragraph-margin {
margin-bottom: 24px;
}
`;
const html = `
<div class="twik-variant-actual-popup">
<div class="twik-variant-icon"><img alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwMSA1MTIuMDAxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAxIDUxMi4wMDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiMxNDZBQTg7IiBkPSJNNDgxLjUzLDM0Ny4wMzNsMzAuMDE1LTE5MS42NDljMy4xMjEtMTkuNDQ4LTEwLjExMi0zNy43NDctMjkuNTYxLTQwLjg3N2wwLDBMNzYuOTczLDQ5LjUwMQ0KCUM1Ny41MjUsNDYuMzgsMzkuMjI3LDU5LjYxMywzNi4xMDYsNzkuMDYxbC0xNC4zOTIsODkuNjI3djE3Ny4yM0w0ODEuNTMsMzQ3LjAzM3oiLz4NCjxwYXRoIHN0eWxlPSJmaWxsOiMxMjYwOTk7IiBkPSJNNDgxLjk4NSwxMTQuNTA3TDM2Ni45NTMsOTYuMDQ5QzI4OS42OTQsMjE0LjI2NCwxNjQuNzk5LDI5Ni4xNDIsNjkuMDE5LDM0Ni4wMzRsNDEyLjUxMSwwLjk5OQ0KCWwzMC4wMTUtMTkxLjY0OUM1MTQuNjY2LDEzNS45MzUsNTAxLjQzMywxMTcuNjM3LDQ4MS45ODUsMTE0LjUwN0w0ODEuOTg1LDExNC41MDd6Ii8+DQo8cGF0aCBzdHlsZT0iZmlsbDojNDM5OEQxOyIgZD0iTTM1LjY2OSwxNTkuNzcxaDQxMC4xOTJjMTkuNjk4LDAsMzUuNjY5LDE1Ljk3MSwzNS42NjksMzUuNjY5djIzMS44NDgNCgljMCwxOS42OTgtMTUuOTcxLDM1LjY2OS0zNS42NjksMzUuNjY5SDM1LjY2OUMxNS45NzEsNDYyLjk1NiwwLDQ0Ni45ODYsMCw0MjcuMjg4VjE5NS40NEMwLDE3NS43NDIsMTUuOTcxLDE1OS43NzEsMzUuNjY5LDE1OS43NzF6DQoJIi8+DQo8cGF0aCBzdHlsZT0iZmlsbDojM0U4Q0M3OyIgZD0iTTQ0NS44NjEsMTU5Ljc3MWgtNy4xMzRjLTg0LjE3OSwxNDkuNDQ0LTI0MS40NjksMjUxLjk1Ni0zMzcuNDksMzAzLjE4NWgzNDQuNjI0DQoJYzE5LjY5OCwwLDM1LjY2OS0xNS45NzEsMzUuNjY5LTM1LjY2OVYxOTUuNDRDNDgxLjUzLDE3NS43NDIsNDY1LjU1OSwxNTkuNzcxLDQ0NS44NjEsMTU5Ljc3MXoiLz4NCjxyZWN0IHg9IjQ0LjU4NiIgeT0iMjA0LjM1NyIgc3R5bGU9ImZpbGw6I0ZEQjYyRjsiIHdpZHRoPSI4OS4xNzIiIGhlaWdodD0iNzEuMzM4Ii8+DQo8Zz4NCgk8cmVjdCB4PSI0NC41ODYiIHk9IjIzMS4xMDkiIHN0eWxlPSJmaWxsOiNGRDdCMkY7IiB3aWR0aD0iMjYuNzUyIiBoZWlnaHQ9IjE3LjgzNCIvPg0KCTxyZWN0IHg9IjEwNy4wMDciIHk9IjIzMS4xMDkiIHN0eWxlPSJmaWxsOiNGRDdCMkY7IiB3aWR0aD0iMjYuNzUyIiBoZWlnaHQ9IjE3LjgzNCIvPg0KPC9nPg0KPGNpcmNsZSBzdHlsZT0iZmlsbDojRkRCNjJGOyIgY3g9IjM5Mi4zNTgiIGN5PSIzNzMuNzg0IiByPSI0NC41ODYiLz4NCjxjaXJjbGUgc3R5bGU9ImZpbGw6I0RFNEMzQzsiIGN4PSIzMzguODU0IiBjeT0iMzczLjc4NCIgcj0iNDQuNTg2Ii8+DQo8Zz4NCgk8cmVjdCB4PSIzNS42NjkiIHk9IjMzOC4xMTUiIHN0eWxlPSJmaWxsOiM4N0NFRDk7IiB3aWR0aD0iNTMuNTAzIiBoZWlnaHQ9IjE3LjgzNCIvPg0KCTxyZWN0IHg9IjEyNC44NDEiIHk9IjMzOC4xMTUiIHN0eWxlPSJmaWxsOiM4N0NFRDk7IiB3aWR0aD0iNTMuNTAzIiBoZWlnaHQ9IjE3LjgzNCIvPg0KCTxyZWN0IHg9IjIxNC4wMTMiIHk9IjMzOC4xMTUiIHN0eWxlPSJmaWxsOiM4N0NFRDk7IiB3aWR0aD0iNTMuNTAzIiBoZWlnaHQ9IjE3LjgzNCIvPg0KCTxyZWN0IHg9IjM1LjY2OSIgeT0iMzkxLjYxOSIgc3R5bGU9ImZpbGw6Izg3Q0VEOTsiIHdpZHRoPSIyMzEuODQ4IiBoZWlnaHQ9IjE3LjgzNCIvPg0KCTxyZWN0IHg9IjMxMi4xMDMiIHk9IjIwNC4zNTciIHN0eWxlPSJmaWxsOiM4N0NFRDk7IiB3aWR0aD0iMTcuODM0IiBoZWlnaHQ9IjM1LjY2OSIvPg0KCTxyZWN0IHg9IjM0Ny43NzIiIHk9IjIwNC4zNTciIHN0eWxlPSJmaWxsOiM4N0NFRDk7IiB3aWR0aD0iMTcuODM0IiBoZWlnaHQ9IjM1LjY2OSIvPg0KCTxyZWN0IHg9IjM4My40NCIgeT0iMjA0LjM1NyIgc3R5bGU9ImZpbGw6Izg3Q0VEOTsiIHdpZHRoPSIxNy44MzQiIGhlaWdodD0iMzUuNjY5Ii8+DQoJPHJlY3QgeD0iNDE5LjEwOSIgeT0iMjA0LjM1NyIgc3R5bGU9ImZpbGw6Izg3Q0VEOTsiIHdpZHRoPSIxNy44MzQiIGhlaWdodD0iMzUuNjY5Ii8+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg=="></div>
<h3 class="twik-variant-title">What is the correct keyword?</h3>
<p class="twik-variant-p">Enter your response</p>
<form class="twik-variant-select-field" onsubmit="onSubmitTwikCoupon()">
<input name="field" class="twik-variant-select-field twik-variant-paragraph-margin" onkeyup="onChangeTwikCoupon(this)"/>
<button type="submit" class="btn button">שלח</button>
</form>
</div>
`;
const errorHtml = `
<div class="twik-variant-actual-popup">
<h3>Sorry, that is incorrect</h3>
<p class="twik-variant-paragraph-margin">Your response is incompatible, therefore your input is not valid</p>
<button class="btn button" onclick="onCloseTwikCoupon(this)">Close</button>
</div>
`;
const style = document.createElement('style');
style.innerHTML = css;
document.head.appendChild(style);
const popup = document.createElement('div');
popup.className = 'twik-variant-popup-container';
const couponContainer = document.querySelector('.promocode.validationGroup');
const couponInput = couponContainer.querySelector('input');
couponInput.addEventListener('keyup', e => {
if (TRIGGER_VALUE.includes(e.target.value)) {
popup.innerHTML = html;
document.body.appendChild(popup);
}
});
window.onChangeTwikCoupon = target => {
if (RESPONSE_VALUES.includes(target.value)) {
document.body.removeChild(popup);
}
};
window.onSubmitTwikCoupon = () => {
popup.innerHTML = errorHtml;
};
window.onCloseTwikCoupon = () => {
document.body.removeChild(popup);
couponInput.value = '';
};

Overview

Create a selector in twik for the input field you would like to validate. Connect it to this variant to set up a validation stage for the input entered - set a 'trigger_value' in the script and as many correct values as you need. Choose the texts you wish to be displayed in the dialogue and error message. Once a correct answer is provided, the user can go back to the funnel, otherwise the input field will be emptied.

Screenshots

Developer

Uploaded 4 variants

Category

Retention

Tags

forms intellisense

Reviews

0

out of 0

Thank you! Your submission has been received!

Explore more resources

You can use Twik's widgets to create beautiful, effective variants on your website such as popups, shorter forms, and more.

Try it now

See what Twik can do for you with our free 14-day evaluation period, limited to 1,000 pageviews.