DxDataGrid: Implementing a comprehensive validation system for multiple edit fields

I'm currently working with a DxDataGrid within an Angular Application. Within this particular application, I have the need to input four dates. I've implemented validation rules that work well for each individual field. However, my challenge arises when I need to validate all four fields if any one of them is modified. For instance, if I enter an endDate that precedes the startDate, the expected validation error appears in the endDate field. Yet, if I subsequently adjust the startDate to a time prior to the endDate, the validation error persists in the endDate field because it is not being revalidated.

Below is what I've managed to achieve so far:

<dx-data-grid>

  <dxi-column dataField="inPeriodStart" caption="In-Period Start" dataType="date"">
    <dxi-validation-rule reevaluate="true" type="custom" message="Both start and end period has to be specified"
      [validationCallback]="validateStartAndEndInPeriod"></dxi-validation-rule>
    <dxi-validation-rule reevaluate="true" type="custom" message="Start has to be before end." [validationCallback]="validateStartBeforeEnd"></dxi-validation-rule>
    <dxi-validation-rule reevaluate="true" type="custom" message="Either In-Period or For-Period has to be specified."
      [validationCallback]="validateInOrForSpecified"></dxi-validation-rule>
      <dxi-validation-rule type="custom" [validationCallback]="verifyDate" message="In-Period Start must be a valid date"></dxi-validation-rule>
  </dxi-column>


  <dxi-column dataField="inPeriodEnd" caption="In-Period End" dataType="date">
    //same rules
  </dxi-column>


  <dxi-column dataField="forPeriodStart" caption="For-Period Start" dataType="date">
    //same rules
  </dxi-column>

  <dxi-column dataField="forPeriodEnd" caption="For-Period End" dataType="date">
    // same rules
  </dxi-column>
</dx-data-grid>

How would you recommend solving this issue? Any suggestions are greatly appreciated!

javascriptangulartypescriptdevextremedevextreme-angular

Answer №1

It's possible that there is an incorrect syntax in your code (consider reevaluating and using square brackets).

I've provided a sample below with validations for first name and last name. Please test your scenarios and share the results with me. https://codesandbox.io/s/0x28kn2v4n

EDIT: If you are in editing mode on a form, refer to this link for information on how to validate rows without making changes:

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

The jQuery AJAX response consistently comes back empty

Hello, I'm currently working on creating an HTML form and I need to validate it before submitting the form action. However, when I use AJAX to respond, I keep receiving a blank message. Can anyone help me with this issue? $(function(){ $("#ajax-p ...

javascriptjqueryhtmlajaxvalidation

How to assign a click event to dynamically generated HTML elements using jQuery

My goal is to attach an onclick event to a dynamically inserted element using jQuery However, I am facing an issue where the function does not execute. I would appreciate it if someone could help me determine why this example is not functioning correctly ...

javascriptjquerybind

What is the proper way to implement v-model for a custom component within the Vue render function?

Below is the code that I am working with: ... var label_key_map = { a: "1", b: "2", c: "3", d: "4" } render: (h) => { var form_data = {} for (let key in label_key_map) { var form_item = h( 'FormItem', {props: {prop: key}}, ...

javascriptvue.jsvuejs2

Utilizing AngularJS to show content based on regular expressions using ng-show

With two images available, I need to display one image at a time based on an input regex pattern. Here is the code snippet: <input type="password" ng-model="password" placeholder="Enter Password"/> <img src="../close.png" ng-show="password != [ ...

javascriptangularjshtml

attempting to fulfil a promise through a resolution

I am currently attempting to use a resolve with a promise in response to an issue with filters that I am currently tackling. However, my resolve function is not yet functioning as expected. I have decided to implement this approach based on advice I recei ...

javascriptangularjs

Why is it that I am unable to utilize the post data stored in $var within my PHP document when making an Ajax call?

Hey there! I've got this function that makes an ajax call. But, for some reason, the $value I'm passing isn't defined in my showuser.php file. Can you help me figure out why? function showUser2(value) { var xhr = new XMLHttp ...

javascriptphpjqueryajax

What is the reason for the emergence of this error message: "TypeError: mkdirp is not recognized as a function"?

While running the code, I encountered an error indicating that the file creation process was not working. I am seeking assistance to resolve this issue. The code is designed to fetch data from the Naver Trend API and Naver Advertising API, calculate resul ...

javascriptnode.jsnpm

What is causing the rejection to stay suppressed?

I noticed that when function uploadLogs() is rejected, the expected rejection bubbling up to be handled by function reject(reason) does not occur. Why is this happening? In the code below, a rejection handler for function uploadLogs() successfully handles ...

javascriptangularjs

Integrating Bootstrap-vue into your Webpack setup for seamless usage

After beginning a project with vuejs-templates and webpack, I decided to incorporate bootstrap-vue. Now, the challenge is figuring out how to implement a bootstrap button. In my code base, specifically in main.js, I have imported BootstrapVue: import Vu ...

javascripttwitter-bootstrapwebpackecmascript-6vue.js

"Can you share how to send an array of integers from a Jade URL to an Express.js route

I am currently working on creating an array of integers in JavaScript using the Jade template engine. My goal is to send this array to an Express.js route when a button is clicked. I have attempted the following code: Jade File: //Passing the ID to fu ...

javascriptnode.jsexpresspug

Unlocking the potential of deeply nested child objects

I have a recursively typed object that I want to retrieve the keys and any child keys of a specific type from. For example, I am looking to extract a union type consisting of: '/another' | '/parent' | '/child' Here is an il ...

typescript

Switching over to Typescript: Sending mapped properties

I'm having trouble converting my React.JS script to TypeScript. I need assistance in creating a drop-down navigation bar on my website. Here's a snippet from my Header.tsx file: The error message Property 'onClick' does not exist on t ...

reactjstypescript

Tips for adjusting image and div sizes dynamically according to the window size

In my quest, the end goal is to craft a simplistic gallery that closely resembles this particular example: EXAMPLE: This sample gallery is created using Flash technology, but I aim to develop mine utilizing HTML, CSS & Javascript to ensure compatibil ...

javascriptjqueryhtmlcss

What are some ways to adjust the size of the option field in a select menu?

In my ionic popup, I have a HTML property called select with nested options. Below is the code snippet along with the applied CSS. My query is how can I set the white space to occupy the entire area of the select? https://i.stack.imgur.com/iPqAa.png http ...

javascripthtmlcss

Is there a way to update the content of both spans within a button component that is styled using styled-components in React?

I am interested in creating a unique button component using HTML code like the following: <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> ...

javascriptcssreactjsstyled-components

Error encountered during npm package installation due to conflicting RXJS versions

Having a recurring issue with [email protected] and [email protected] versions is causing me trouble. Whenever I attempt to install new npm libraries, an error message pops up in the console: MacBook:angular2-seed$ npm install less <a href="/ ...

angularnpmnpm-install

tips for integrating html5 elements with django forms

I am interested in utilizing the following code: # extra.py in yourproject/app/ from django.db.models import FileField from django.forms import forms from django.template.defaultfilters import filesizeformat from django.utils.translation import ugettext_ ...

javascriptpythondjangohtmldjango-forms

Having difficulty including a new key-value pair to a JSON object while using another JSON object

Looking to merge key value pairs from one JSON object into another. I've searched through various stackoverflow threads for solutions, but haven't found one that works for my specific scenario. const primaryObject = { name: "John Doe", ag ...

javascriptjson

Obtain URL parameters prior to rendering with Next.js on the server side

Looking to retrieve the parameters from a URL coming from the Spotify API, for example: http//link.com/?code=examplecode. Is there a way to extract the value of "code" prior to rendering so that I can redirect it and transfer the code value to another p ...

javascriptreactjsnext.js

Is placing JavaScript on the lowest layer the best approach?

I'm facing a unique situation that I haven't encountered before and am unsure of how to address it. My website has a fixed top header and footer. On the left side, there is a Google Adsense ad in JavaScript. When scrolling down, the top header s ...

javascripthtmlc#-4.0asp.net-mvc-4adsense