<%@ Page Title="Custom Client Validation" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Custom Client Validation - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Custom Client-Side Validation</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Custom Client-Side Validation</div> <div class="demo-card-body"> <p class="demo-description"> Implement any custom validation logic in the <code>onSelect</code> callback. This example
 rejects files with spaces in the name and requires a naming convention.
 </p> <div class="demo-expect"><strong>What you should see:</strong> your own validation function runs per file at selection time - rules the built-in validators do not cover.</div> <div id="customValUploader"></div> <div id="customValStatus" class="mt-2" role="status" aria-live="polite"></div> <div class="code-panel"> <pre><code>AjaxUploader.create(element, {
 onSelect: function (file) {
 if (/\s/.test(file.name)) {
 showValidationMessage('Filenames must not contain spaces.');
 return false;
 }
 if (!/^[a-zA-Z]/.test(file.name)) {
 showValidationMessage('Filename must start with a letter.');
 return false;
 }
 return true;
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> document.addEventListener('DOMContentLoaded', function () {
 var host = document.getElementById('customValUploader');
 var statusEl = document.getElementById('customValStatus');
 function setStatus(className, message) {
 if (!statusEl) return;
 statusEl.textContent = '';
 var span = document.createElement('span');
 span.className = className;
 span.textContent = message;
 statusEl.appendChild(span);
 }

 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 multiple: true,
 autoUpload: true,
 showProgress: true,
 buttonText: 'Select Files',
 onSelect: function (file) {
 // No spaces in filename
 if (/\s/.test(file.name)) {
 setStatus('text-danger', 'Rejected: filenames must not contain spaces.');
 return false;
 }
 // Must start with a letter
 if (!/^[a-zA-Z]/.test(file.name)) {
 setStatus('text-danger', 'Rejected: filename must start with a letter.');
 return false;
 }
 setStatus('text-success', 'Accepted: ' + file.name);
 return true;
 }
 });
 });
</script>
</asp:Content>
