Dialog Templete Add/editing

Question

Good, I have developed a Templete dialog, but when validating, it only validates the ones from the first Tab, when there is a validation error in another Tab, the tab does not change and the field does not mark me as required.

Hareesh Balasubramanian · Answer

Hi Deigo, 

Greetings from Syncfusion Support. 

We have validated your reported query at our end and we suspect that your requirement is to prepare a wizard sample using Tab component and for that kindly refer the below UG link and SB sample. 

UG link: https://ej2.syncfusion.com/aspnetcore/documentation/tab/how-to/create-wizard-using-tab/ 
SB sample: https://ej2.syncfusion.com/aspnetcore/Tab/Wizard#/material 

Kindly try the above solutions and if you not satisfied with our solution means kindly share with us more details like issue replication steps/Tab component rendering code/image/video demo for the better serve. 

Regards, 
Hareesh

diego · Answer

It is not my case, I mean I use a dialog template, which has different tabs for data entry, and when I press the accept button, I validate the form and send it.

Hareesh Balasubramanian · Answer

Hi Diego, 

Thanks for the update. 

We have validated your reported query at our end and for the same, we have prepared a sample. In that sample, when we click on the OK button in the Dialog Component then only the Tab component will switches to the another Tab items and the sample can be downloaded from the following link, 

Sample: https://www.syncfusion.com/downloads/support/forum/153110/ze/sample-1680545766  

Could you please confirm whether your requirement is similar to this? 

If the above solution is not your requirement, please share with us the below details to serve you better. 

Tab rendering codes
Dialog template codes 

Regards, 
Hareesh

diego · Answer

I explain better I have a Grid, when I click on the edit / create button I have implemented the dialog template for the insertion form.

By pressing the OK button, it validates me and shows the errors of the first Tab, but if I am in the last tab it does not mark me that the error is in the first tab, nor does it mark the errors.

Hareesh Balasubramanian · Answer

Hi Diego, 

Thanks for the update. 
  
We have validated your reported scenario at our end and based on your shared images, we have prepared the sample to validate the dialog form while saving the changes on it and the sample is available in below link., 
  
Sample: https://stackblitz.com/edit/pyk25o-peywpa?file=index.html  
  
Could you please confirm whether the above sample is similar to your situation? 

If we misunderstood your scenario, please reproduce your issue in the above sample and get back to us for further assistance. 
  
Regards, 
Hareesh

diego · Answer

Hi Diego, 

Thanks for the update. 
  
We have validated your reported scenario at our end and based on your shared images, we have prepared the sample to validate the dialog form while saving the changes on it and the sample is available in below link., 
  
Sample: https://stackblitz.com/edit/pyk25o-peywpa?file=index.html  
  
Could you please confirm whether the above sample is similar to your situation? 

If we misunderstood your scenario, please reproduce your issue in the above sample and get back to us for further assistance. 
  
Regards, 
Hareesh No, the scenario is for example 2 tabs, which each have required fields, imagine if we leave a field unfinished in tab01, and we are focused on tab 02 when pressing the accept button, the validator will check that there is an error in tab01 and that field.

Hareesh Balasubramanian · Answer

Hi Diego, 

Thanks for the update. 

Based on your shared scenario, we have modified our previously updated sample in such a way that the validation will check for all the form in their respective items of the Tab component. And the modified sample can be viewed from the following link. 

Code snippet: 




document.getElementById('formId').addEventListener("submit", function (e) { 
  debugger; 
  e.preventDefault(); 
  if (formObj.validate() && formObj2.validate() && formObj1.validate()) { 
    alert('Customer details added!'); 
    formObj.reset(); 
  } else { 
    alert("Enter all details in all tab forms"); 
  } 
}); 
// Initialize Form validation 
var formObj1; 
formObj1 = new ej.inputs.FormValidator('#formId1', option); 
var formId = document.getElementById('formId1'); 
document.getElementById('formId1').addEventListener("submit", function (e) { 
  debugger; 
  e.preventDefault(); 
  if (formObj1.validate() && formObj2.validate() && formObj.validate()) { 
    alert('Customer details added!'); 
    formObj1.reset(); 
  } else { 
    alert("Enter all details in all tab forms"); 
  } 
}); 

var formObj2; 
formObj2 = new ej.inputs.FormValidator('#formId2', option); 
var formId = document.getElementById('formId2'); 
document.getElementById('formId2').addEventListener("submit", function (e) { 
  debugger; 
  e.preventDefault(); 
  if (formObj2.validate() && formObj.validate() && formObj.validate()) { 
    alert('Customer details added!'); 
    formObj2.reset(); 
  } else { 
    alert("Enter all details in all tab forms"); 
  } 
}); 

Sample: https://stackblitz.com/edit/pyk25o-dtjajl?file=index.js 

Kindly try the sample and get back to us if you need any further assistance. 

Regards, 
Hareesh

diego · Answer

I am investigating how to change the dialog button, I am using the edit dialog of a data grid

diego · Answer

I am investigating how to change the dialog button, I am using the edit dialog of a data grid

Good afternoon I have managed to solve it, I have overwritten the event of said button obtaining it by JS and then assigning to a form validator object the elements of each tabs I can perform the verification of the form.

The only question I have now is to show these errors by Validation.js tooltips

Hareesh Balasubramanian · Answer

Hi Diego, 
  
Thanks for being patience. 
  
We have validated your reported scenario “The only question I have now is to show these errors by Validation.js tooltips” at our end. And for that we have prepared a sample using Tooltip component to show the validation error in Tooltip. And the sample can be viewed from the following link. 
  
Code snippet: 




document.getElementById('formId').addEventListener("submit", function (e) { 
  e.preventDefault(); 
  var clickTooltipuserText = new ej.popups.Tooltip({ 
    opensOn: 'custom', 
    content: 'This field is required' 
  }); 
  clickTooltipuserText.appendTo('#userText'); 
  var clickTooltipemailText = new ej.popups.Tooltip({ 
    opensOn: 'custom', 
    content: 'This field is required' 
  }); 
  clickTooltipemailText.appendTo('#emailText'); 
  if (document.querySelector('#user').value == "") { 
    var data = document.querySelector('#userText'); 
    clickTooltipuserText.open(data); 
  } 
  if (document.querySelector('#mail').value == "") { 
    var data = document.querySelector('#emailText'); 
    clickTooltipemailText.open(data); 
  } 
}); 
 
Sample: https://stackblitz.com/edit/rx38zb?file=index.js 
  
Kindly try the above sample and revert us if you have any further assistance. 
  
Regards, 
Hareesh