<%@ 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.0 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 id="customValUploader"></div> <div id="customValStatus" class="mt-2"></div> <div class="code-panel"> <pre><code>AjaxUploader.create(element, {
 onSelect: function (file) {
 if (/\s/.test(file.name)) {
 alert('Filenames must not contain spaces.');
 return false;
 }
 if (!/^[a-zA-Z]/.test(file.name)) {
 alert('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 () {
 AjaxUploader.create(document.getElementById('customValUploader'), {
 multiple: true,
 autoUpload: true,
 showProgress: true,
 buttonText: 'Select Files',
 onSelect: function (file) {
 var statusEl = document.getElementById('customValStatus');
 // No spaces in filename
 if (/\s/.test(file.name)) {
 statusEl.innerHTML = '<span class="text-danger">Rejected: filenames must not contain spaces.</span>';
 return false;
 }
 // Must start with a letter
 if (!/^[a-zA-Z]/.test(file.name)) {
 statusEl.innerHTML = '<span class="text-danger">Rejected: filename must start with a letter.</span>';
 return false;
 }
 statusEl.innerHTML = '<span class="text-success">Accepted: ' + file.name + '</span>';
 return true;
 }
 });
 });
</script>
</asp:Content>
