New to Kendo UI for jQuery? Download free 30-day trial

jQuery SmartPasteButton Validation

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main

Main Dark
Launch Theme Builder

validation.html

Also available for:

API REFERENCE

Placeholder Message

Friday, June 28, 2026

Ashley Johnson, Portland

$(document).ready(function () { $("#copyButton").kendoButton({ fillMode: "clear", click: onClick }); $("#loader").kendoLoader({ size: "large", type: "converging-spinner", visible: false }); $("#overviewForm").kendoForm({ orientation: "vertical", validatable: { validationSummary: false, }, buttonsTemplate: "<button id='clearButton' type='reset' onclick='onClear()' " + "data-role='button' class='k-button k-button-md k-rounded-md k-button-flat k-button-flat-base' " + "role='button' aria-disabled='false' tabindex='0'>" + "<span class='k-icon k-font-icon k-i-arrow-rotate-ccw'></span>" + "</button>", items: [ { field: "FullName", label: "Full Name", editor: "TextBox", editorOptions: { placeholder: "e.g. John Doe" } }, { field: "City", label: "City", editor: "TextBox", editorOptions: { placeholder: "e.g. London" } }, { field: "Phone", label: "Phone Number", editor: "MaskedTextBox", validation: { required: true }, editorOptions: { mask: "(000) 000-00-00" }, attributes: { placeholder: "e.g. XXXXXXXX" } } ], smartPaste: { text: "Smart Paste", service: "https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste", requestStart: onRequestStart, requestEnd: onRequestEnd } }); $("#overviewForm input").on("change", function () { var input = $(this); var wrapper = input.closest(".k-input"); var currInputValue = this.value; if (currInputValue == "") { setTimeout(function () { wrapper.removeClass("k-valid"); input.removeClass("valid"); }, 0); } }); }); function onClick(e) { const element = document.getElementById("chat-message"); const range = document.createRange(); range.selectNodeContents(element); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); navigator.clipboard.writeText(element.innerText); $(e.sender.element).find(".k-button-text").text("Text Copied"); $(e.sender.element).blur(); } function onRequestStart() { $("#loader").data("kendoLoader").show(); $("#copyButton").find(".k-button-text").text("Copy"); clearSelection(); } function onClear() { $(".k-form-field").removeClass("k-form-field-error"); $(".k-input").removeClass("k-invalid"); $(".k-invalid-msg").remove(); $("#copyButton").find(".k-button-text").text("Copy"); clearSelection(); $(".k-input").removeClass("k-valid"); } function onRequestEnd() { $("#loader").data("kendoLoader").hide(); $("#Phone").blur(); } function clearSelection() { var selection = window.getSelection(); if (selection && selection.rangeCount > 0) { selection.removeAllRanges(); } } .events-chat { background-color: var(--kendo-color-surface); width: 300px; border-radius: 16px; } .chat-card { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; } .chat-card > * { margin-bottom: 12px; } .chat-card > *:last-child { margin-bottom: 0; } .chat-header { display: flex; justify-content: right; align-items: center; gap: 8px; } .chat-bot-message { background: #bdbdbd; border-radius: 20px; padding: 8px 16px; font-size: 13px; color: #4a4a4a; } .chat-bot-disabled { opacity: .75; } .chat-date { text-align: center; font-size: 12px; color: #8a8a8a; } .chat-message { background: var(--kendo-color-base); border-radius: 16px; padding: 10px 14px; font-size: 14px; width: fit-content; margin-bottom: 0; background: var(--kendo-color-base); } .chat-copy { font-size: 14px; font-style: italic; padding-top: 0; padding-left: 65px; } .chat-copy.k-button:active { background-color: transparent; box-shadow: none; } #copyButton { background: var(--kendo-color-base); } .chat-input { position: relative; margin-top: auto; border-radius: 12px; background-color: var(--kendo-color-surface-alt); height: 90px; } .chat-input input { position: absolute; top: 12px; left: 12px; right: 12px; border: none; outline: none; font-size: 14px; background: transparent; color: #a0a0a0; } .chat-icon { position: absolute; bottom: 12px; font-size: 16px; color: #9a9a9a; } .chat-icon.k-i-paperclip-alt { left: 12px; bottom: 5px; height: 26px } .chat-icon.k-i-microphone-outline { right: 50px; bottom: 5px; height: 26px } .chat-icon.k-i-arrow-up-outline { right: 12px; bottom: 5px; width: 28px; height: 28px; border-radius: 50%; background-color: var(--kendo-color-base); display: flex; align-items: center; justify-content: center; } .avatar { width: 24px; height: 24px; border-radius: 50%; background-image: url("../../content/web/smartPaste/avatar.png"); background-size: cover; background-position: center; background-repeat: no-repeat; }

Description

Clipboard text may be incomplete or not match the expected structure. The SmartPasteButton integrates well with form validation and enables you to provide clear feedback when required fields are not populated as expected.

This demo demonstrates a common recovery flow—showing request progress while the AI service is processing, and allowing users to reset the form state and clear validation messages after an incomplete paste.

For additional guidance, refer to the SmartPasteButton error handling documentation.

This SmartPasteButton example is part of the Kendo UI for jQuery demos collection.

jQuery SmartPasteButton Validation

Description

Related Documentation

Support & Learning Resources

Additional Resources