Pattern at one Location

Question

Hi In below code i have used Pattern . I want to declare this line at one location. Whenever it is changed effect takes place on all Aspx pages. It should appear in SweetAlert. pattern="[a-zA-Z\s\.]*" title="Valid characters: Alphabets/Space & . (Dot)" . Department Name   * Short Name Thanks

Naimish Makwana · Answer

To centralize the pattern and title attributes for your textboxes, you can define them in a single location and reference them in your ASPX pages. Here’s how you can do it:

Step 1: Define the Pattern and Title in Web.config

Add the pattern and title as app settings in your Web.config file.

<configuration>
  <appSettings>
    <add key="TextBoxPattern" value="[a-zA-Z\s\.]*" />
    <add key="TextBoxTitle" value="Valid characters: Alphabets/Space & . (Dot)" />
  </appSettings>
</configuration>

Step 2: Create a Helper Method in Code-Behind

Create a helper method in your base page or a utility class to retrieve these settings.

public static class Utility
{
    public static string GetTextBoxPattern()
    {
        return System.Configuration.ConfigurationManager.AppSettings["TextBoxPattern"];
    }

    public static string GetTextBoxTitle()
    {
        return System.Configuration.ConfigurationManager.AppSettings["TextBoxTitle"];
    }
}

Step 3: Use the Helper Method in Your ASPX Pages

Use the helper method to set the pattern and title attributes in your ASPX pages.

<%@ Import Namespace="YourProjectNamespace" %>

<div class="col-lg-6 col-md-6 col-sm-12">
    <div class="form-group">
        <label>Department Name</label>&nbsp;<span style="color: red">*</span>
        <asp:TextBox ID="txtDepartmentName" MinLength="2" MaxLength="50" class="form-control" placeholder="Department Name" required="true"
            pattern="<%= Utility.GetTextBoxPattern() %>" title="<%= Utility.GetTextBoxTitle() %>" runat="server"></asp:TextBox>
    </div>
</div>
<div class="col-lg-6">
    <div class="form-group">
        <label>Short Name</label>
        <asp:TextBox ID="txtShortName" MinLength="2" MaxLength="15" class="form-control" placeholder="Short Name" required="true"
            pattern="<%= Utility.GetTextBoxPattern() %>" title="<%= Utility.GetTextBoxTitle() %>" runat="server"></asp:TextBox>
    </div>
</div>

Step 4: Implement SweetAlert for Validation Messages

To display validation messages using SweetAlert, you can use JavaScript to check the validity of the textboxes and show the alert.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function validateForm() {
        var isValid = true;
        var textboxes = document.querySelectorAll('input[type="text"]');

        textboxes.forEach(function (textbox) {
            if (!textbox.checkValidity()) {
                isValid = false;
                Swal.fire({
                    icon: 'error',
                    title: 'Invalid Input',
                    text: textbox.title
                });
                return false;
            }
        });

        return isValid;
    }

    document.getElementById('searchForm').onsubmit = function () {
        return validateForm();
    };
</script>

This setup ensures that any changes to the pattern or title are reflected across all your ASPX pages, and SweetAlert is used to display validation messages.

Thanks

Tahir Ansari · Answer

Alternatively, if you want to handle this purely on the client-side without creating a server-side control, you can use JavaScript to apply the attributes dynamically Add JavaScript to Set Attributes : document.addEventListener('DOMContentLoaded', function() { var elements = document.querySelectorAll('input[type="text"][data-pattern]'); elements.forEach(function(el) { el.setAttribute('pattern', el.getAttribute('data-pattern')); el.setAttribute('title', el.getAttribute('data-title')); }); }); Update ASPX Page Department Name   * Short Name

Tahir Ansari · Answer

Custom Control Approach Create a User Control : Right-click on your project and add a new User Control, e.g., CustomTextBox.ascx Code Behind for User Control in the code-behind file, CustomTextBox.ascx.cs using System; namespace YourNamespace { public partial class CustomTextBox : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { txtBox.Attributes["pattern"] = "[a-zA-Z\s\.]*"; txtBox.Attributes["title"] = "Valid characters: Alphabets/Space & . (Dot)"; } public string Text { get { return txtBox.Text; } set { txtBox.Text = value; } } public string Placeholder { get { return txtBox.Attributes["placeholder"]; } set { txtBox.Attributes["placeholder"] = value; } } public int MinLength { get { return int.Parse(txtBox.Attributes["minlength"]); } set { txtBox.Attributes["minlength"] = value.ToString(); } } public int MaxLength { get { return int.Parse(txtBox.Attributes["maxlength"]); } set { txtBox.Attributes["maxlength"] = value.ToString(); } } public bool Required { get { return txtBox.Attributes["required"] != null; } set { txtBox.Attributes["required"] = value ? "true" : null; } } } } Use the User Control in ASPX Pages : Register the control in your ASPX page and use it. Department Name   * Short Name

Ramco Ramco · Answer

Hi Naimish Can we write the code other than Web.Config file. Thanks

Pattern at one Location

Naimish Makwana

Tahir Ansari

Tahir Ansari

Ramco Ramco