Modify CSS and animation through jQuery with ASP.NET Field Validator

Question

Modify CSS and animation through jQuery with ASP.NET Field Validator

My current form contains around 10 controls, similar to the one below:

<asp:TextBox ID="fullname" Width="200" MaxLength="50" runat="server"/>
<asp:RequiredFieldValidator Display="Dynamic" ValidationGroup="contact" ControlToValidate="fullname" ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"/>

I appreciate how ASP.NET fieldvalidators function, but I would like to customize the way validation errors are displayed. Instead of showing an asterisk when validation fails, I want to highlight the input field in red.

To achieve this, I intend to use jQuery for more control over CSS and animations. I prefer this method over ASP.NET animations, which I find overly complex.

I came across a post on Stack Overflow that discussed a similar issue (Change Text Box Color using Required Field Validator. No Extender Controls Please), but it did not provide a clear solution.

So, my question is: Is there a way to retain my ASP.NET validator controls while changing the way error messages are displayed? Can I use jQuery to add or remove animations and CSS classes to the validated input fields instead?

Requirements:
- The code should work for requiredfieldvalidator and regularexpressionvalidator, among others.
- It should capture the enter key press event.
- Error CSS should be removed when the user corrects the input field and validation succeeds.

Thank you!

jquery asp.net css requiredfieldvalidator

Answer 1

Answer №1

Incorporate Custom Validator In Your Code

Here is how you can set it up in your aspx file:

  <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                <asp:CustomValidator ID="cvFirstName" runat="server" SetFocusOnError="true" Display="Dynamic"
                    ValidateEmptyText="true" ControlToValidate="txtFirstName" ClientValidationFunction="validateValue"></asp:CustomValidator>

Next, include the following JavaScript logic:

   <script type="text/javascript">
        function validateValue(source, args) {
            if (args.Value == "") {
                args.IsValid = false;
                document.getElementById(source.id.replace('cv', 'txt')).className = 'Invalid';                
            }
            else {
                args.IsValid = true;
                document.getElementById(source.id.replace('cv', 'txt')).className = 'Valid';
            }
        }  
    </script>

And finally, style it using CSS:

 <style type="text/css">
        .Invalid
        {
            border: 1px solid red;
        }
        .Valid
        {
            border: 1px solid White;
        }

    </style>

Answer 2

Incorporate Custom Validator In Your Code

Here is how you can set it up in your aspx file:

  <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                <asp:CustomValidator ID="cvFirstName" runat="server" SetFocusOnError="true" Display="Dynamic"
                    ValidateEmptyText="true" ControlToValidate="txtFirstName" ClientValidationFunction="validateValue"></asp:CustomValidator>

Next, include the following JavaScript logic:

   <script type="text/javascript">
        function validateValue(source, args) {
            if (args.Value == "") {
                args.IsValid = false;
                document.getElementById(source.id.replace('cv', 'txt')).className = 'Invalid';                
            }
            else {
                args.IsValid = true;
                document.getElementById(source.id.replace('cv', 'txt')).className = 'Valid';
            }
        }  
    </script>

And finally, style it using CSS:

 <style type="text/css">
        .Invalid
        {
            border: 1px solid red;
        }
        .Valid
        {
            border: 1px solid White;
        }

    </style>

Modify CSS and animation through jQuery with ASP.NET Field Validator

Answer №1

Similar questions

Creating Buttons with Multiple Functions

Creating a custom design for input outline borders using CSS3

Ways to avoid the default values from being applied

Locate the initial div with a distinct class from the bottom upwards

Iterate through the loop to add data to the table

Modifying selections in the secondary dropdown menu based on the user's input in the primary dropdown menu

Creating a toggle button with just HTML and CSS on a single page, no need for JavaScript!

Choosing the right framework for a web application

Overlap one element entirely with another

Finding your way to a <div data-role="page"> sans the use of an anchor tag

When you hover over the vertical sidebar menu in Bootstrap material design, a submenu will appear

Make a jQuery request similar to using Postman

Utilizing CSS and JavaScript for Image Masking

What method is being used by this website to carry out this specific task?

A double click is required to enable the connected mouse press/release action

Retrieve the initial index from a sorted array in JavaScript using an array

External JavaScript script files are causing issues, whereas internal scripts are functioning properly

JavaScript: Navigating Through Frames and iFrames in Internet Explorer

Biodegradable AJAX jQuery Pagination

Integrate HTML forms seamlessly with Bootstrap