Modify: "Alter the background color of the parent container for elements that are deemed invalid during

I am currently working on implementing asp.net's built-in validation feature to indicate required fields, but I want to take it a step further by not only displaying a message but also changing the background color of the parent div containing the invalid element.

It seems like using the ClientValidationFunction option is the way to go, however, I'm facing some difficulties while trying to make it work.

This is what I've managed to come up with so far...

<asp:TextBox runat="server" ID="myOption" />
<asp:RequiredFieldValidator runat="server" 
     ID="myOption_req" 
     ClientValidationFunction="validateMe" 
     EnableClientScript="true" 
     ControlToValidate="myOption" 
     Text="*" 
     ErrorMessage="Please fill in all required fields" />

Accompanied by the following javascript code:

function validateMe(){        
    alert("Hello World");      
}

I am currently stuck at getting the alert message to show up and haven't been able to proceed with changing the background color of the parent element yet.

javascriptasp.netvalidation

Answer №1

Give this a shot,

javascript

function checkInput(sender, args)
{
  if (args.Value == "hello world")
     args.IsValid = true;
  else
     args.IsValid = false;
}

Your aspx

<asp:CustomValidator style="Red" runat="server" ID="myOption_req" 
    ClientValidationFunction="checkInput" 
    EnableClientScript="true" 
    ControlToValidate="myOption" ValidateEmptyText="true"
    Text="*" 
    ErrorMessage="Please complete all mandatory fields" />

Answer №2

Make sure to include the color attribute as "Red" in your validation control.

Also, update 

ClientValidationFunction="javascript:validateMe();"
instead of 
ClientValidationFunction="validateMe"

<asp:RequiredFieldValidator color="Red" runat="server" 
         ID="myOption_req" 
         ClientValidationFunction="javascript:validateMe();" 
         EnableClientScript="true" 
         ControlToValidate="myOption" 
         Text="*" 
         ErrorMessage="Please fill in all required fields" />

Answer №3

ClientValidationFunction cannot be used with the RequiredFieldValidator.

To execute some javascript, you should utilize a CustomValidator. You can do so by including the following code:

<asp:CustomValidator color="Blue" runat="server" ID="myField_req" 
    ClientValidationFunction="validateInput" 
    EnableClientScript="true" 
    ControlToValidate="myField" ValidateEmptyText="true"
    Text="*" 
    ErrorMessage="Please ensure all required fields are completed" />

Remember to set the ValidateEmptyText="true" property, or else the validation will be disregarded if the textbox is left empty.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There is a lack of 'Access-Control-Allow-Origin' header - Issue encountered while making Food2Fork API request using AJAX

Our team has just embarked on our first project, and I've encountered a roadblock while conducting API testing. Specifically, I am struggling to generate a successful access control header. Is there anyone who can provide assistance in troubleshooting ...

javascriptajaxapicors

The identical page content is displayed on each and every URL

Implementing a multi-step form in Next JS involves adding specific code within the app.js file. Here is an example of how it can be done: import React from "react"; import ReactDOM from "react-dom"; // Other necessary imports... // Add ...

javascriptreactjsnext.jsserver-side-rendering

Adjust the internal state within a Vue3 component using a window function

Creating a "Loader" component that is fully independent and functional just by being included in the layout requires exposing some methods for use. Here is the code I have come up with: <script setup> let active = false; function show() { active ...

javascriptvue.jsvuejs3

Confirm before closing the window

How can I get this code to function properly and show a confirmation alert after the user clicks on a button? This is essentially an "exit website button". The confirmation pop-up will have: If "OK" is clicked > the current window will close; If ...

javascripthtml

The Model.function method is not a valid function that can be used within a router

Currently facing a challenge with my router setup. I have exported the function as shown in the code snippet below. This is the Model I am using: "use strict"; var mongoose = require('mongoose'); var bcrypt = require("bcryptjs"); var Schema = m ...

javascriptangularjsnode.jsmodel

Steps for generating an array entry containing an ObjectId and a Number

I am a newbie when it comes to mongodb and I am attempting to create an entry like this: { "resources": [ { "amount": 1, "resource": { "_id": "61be82b9549b4ede ...

javascriptnode.jsmongodbexpressmongoose

Managing JSON Forms using jQuery on Google's App Engine

Having difficulty getting jQuery to function properly on GAE in python 2.7. The main issue is that jQuery is unable to retrieve the json data sent by the server. A basic comment form with no special features: <form action="/postcomment/" method="post" ...

javascriptjquerypythonjsongoogle-app-engine

Updating ViewModel and refreshing the view following an AJAX request

I need assistance in creating a table where each row has a child row serving as a details section. This details section should display a log history and allow users to input new logs. Upon adding a new log by clicking the "Add" button, the log history shou ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap-3

The query string in web forms consistently returns a null value

When using the Facebook share feature to share image URLs, I am facing an issue where the user is not redirected back to the same page upon clicking the shared image on Facebook. In my backend logic, there is a process that needs to be completed on the Im ...

c#asp.net

Check to see if two sets of coordinates fall within the specified radius

I'm currently working on analyzing the collision data for major intersections in my city by aggregating it with the location information. My main goal is to determine the number of accidents that occurred within a 20-meter radius of each intersection. ...

javascriptmysqlnode.jsexpresssequelize.js

Using the power of HTML5, store data locally on

I am curious about the possibility of using local storage on a different page. I want to track clicks made on one page and display it on another, but I'm not sure how to go about it or if it's even feasible. Any help you can provide would be grea ...

javascripthtml

Can WebDriverJS be compiled without code minimization using Google Closure Compiler?

I am in need of customizing WebDriverJS to suit my specific requirements. However, I am encountering difficulties with debugging the compiled source code. Having descriptive function names and comments would greatly assist me! Therefore, I am curious to kn ...

javascriptseleniumselenium-webdrivergoogle-closure-compiler

"Revolutionary tool for creating dynamic charts: moving from ASP.NET to HTML

Hello, I am currently developing a project in an ASP.NET environment and am in need of a framework that can generate interactive charts on the server side. It would be ideal if the framework is open source, and produces charts in HTML5 as I also plan to pu ...

asp.nethtmlchartsserver-side

Exploring modifications in axis for Google charts timeline

Can anyone help me figure out how to set my Google Timeline chart to always display 24 hours on the x-axis? Currently, it automatically changes based on the earliest and latest points, but I want it to consistently show all 24 hours. For example: ...

javascriptphpgoogle-visualization

Importing XML data into a JavaScript variable using jQuery without displaying an alert message

Despite previously asking questions about loading XML into a JS variable, I haven't found a satisfactory solution. In my script, I declare a variable before making an ajax request and then assign the result to that variable. However, this only seems t ...

javascriptjqueryxml

Tips for automatically ending the session in asp.net after 5 minutes of computer inactivity

Currently, I am developing a web application using ASP.NET and I have a requirement to automatically close the user session if the computer remains idle for 5 minutes. When I say idle, I mean the entire system, not just the web application. This includes d ...

asp.net

Challenges with Validating Bootstrap Datepicker Functionality

I need to restrict the datepicker input control to only allow selection of dates from the current date onwards. Despite trying to implement validation using the bootstrap-datepicker library and the following JavaScript code, I am still facing issues: $(& ...

javascriptjquerylaravel-5bootstrap-4bootstrap-datepicker

Expanding angularjs date filter to support additional date formats

When working with Angularjs, you can utilize the Date Filter to format dates. Is there a way to get the date in the format outlined below? dd(st || nd || th) mm yyyy 1st May 2014 1<sup>st</sup> May 2014 Should I develop a new custom filter fo ...

javascriptangularjsdate

What is the best way to create a dynamic text area that changes based on a dropdown selection?

I'm trying to create a feature on my form where selecting a retailer from a dropdown menu automatically generates a corresponding link next to the textbox. For example, if someone picks Best Buy, I want a link to bestbuy.com to show up immediately wit ...

phpjavascripthtmlajax

Update an array of objects by incorporating additional properties from another array, even if the two arrays are of different lengths. When the iteration of the array is complete, it should

Is there a way to merge two arrays of objects with different keys? I want to combine the keys of the second array with those of the first one. How can I accomplish this task? $scope.links = [ { name: 'JRD', status: 'active ...

javascriptarraysangularjsobject