We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How implement validation on controls in a DialogTemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

121340 Dec 2,2015 10:17 PM UTC Jun 6,2016 12:04 PM UTC ASP.NET Web Forms 15
loading
Tags: Tab
Oscar Daniel Vega Castaneda
Asked On December 2, 2015 10:17 PM UTC

I've a Grid control with a DialogTemplate, how i can validate controls on that DialogTemplate.

Jayaprakash Kamaraj [Syncfusion]
Replied On December 7, 2015 11:47 AM UTC

Hi Oscar,
You can validate controls by using the Validation Rule property. Please refer to the code example.
Code Example :

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow"

                    OnServerDeleteRow="EditEvents_ServerDeleteRow">

                    <ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" />

                    <Columns>

                        <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90">

                           <ValidationRule>

                                <ej:KeyValue Key="required" Value="true" />

                                <ej:KeyValue Key="number" Value="true" />

                            </ValidationRule>

                        </ej:Column>

                        <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">

                            <ValidationRule>

                                <ej:KeyValue Key="required" Value="true" />

                                <ej:KeyValue Key="minlength" Value="3" />

                            </ValidationRule>

                        </ej:Column>

                        <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="Numeric">

                            <NumericEditOptions DecimalPlaces="2"></NumericEditOptions>

                        </ej:Column>

                        <ej:Column Field="ShipName" HeaderText="ShipName" Width="110"></ej:Column>

                        <ej:Column Field="ShipCountry" HeaderText="ShipCountry" Width="90" EditType="Dropdown" />

                    </Columns>

                    <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Dialog"></EditSettings>

                   <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

                </ej:Grid>


We already have online sample based on your requirement. Please refer to the below sample.
Sample: http://asp.syncfusion.com/demos/web/grid/dialogonlocaldata.aspx
Regards,
Jayaprakash K.

Oscar Daniel Vega Castaneda
Replied On December 7, 2015 04:07 PM UTC

Jayaprakash Kamaraj

Thats dosent work!!! on my example... Can you checkout my attachment

-Try to save a record in blank on Master grid. You'll see, nothing stoped (maybe raise a error but ignore).

An annother throuble, when I try to save a record on detail, the linked bind on Master grid was lost.

Can you helpme please.

Oscar Daniel Vega Castaneda
Replied On December 7, 2015 04:17 PM UTC

Attachment

Oscar Daniel Vega Castaneda
Replied On December 7, 2015 04:19 PM UTC


Jayaprakash Kamaraj [Syncfusion]
Replied On December 8, 2015 11:42 AM UTC

Hi Oscar,
We have analyzed your sample and found that you had not referred to jquery.validate.min.js and jquery.validate.unobtrusive.min.js scripts in your sample. These two files are mandatory for validation. So, please refer to these script files in your sample. Also refer to the below code example and help documentation link.
CodeExample:

    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/jquery.validate.unobtrusive.min.js"></script>


Help Documentation: http://help.syncfusion.com/aspnetmvc/grid/editing#validation

Regards,          
Jayaprakash K.


Oscar Daniel Vega Castaneda
Replied On January 14, 2016 09:06 PM UTC

Thank you!! That's work for me!!!

Prasanna Kumar Viswanathan [Syncfusion]
Replied On January 15, 2016 02:52 PM UTC

Hi Oscar,
 
We are happy that the provided solution working fine at your end.
 
Regards,

Prasanna Kumar N.S.V

Gabriel Obando
Replied On May 26, 2016 08:35 PM UTC

Hi Oscar,
We have analyzed your sample and found that you had not referred to jquery.validate.min.js and jquery.validate.unobtrusive.min.js scripts in your sample. These two files are mandatory for validation. So, please refer to these script files in your sample. Also refer to the below code example and help documentation link.
CodeExample:
    <script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/jquery.validate.unobtrusive.min.js"></script>

Help Documentation: http://help.syncfusion.com/aspnetmvc/grid/editing#validation
Regards,          
Jayaprakash K.

Hello guys im trying the same thing but using the maskedit control
<ej:MaskEdit ID="sfTextboxReportName"  runat="server" Width="100%" WatermarkText="Enter the Report Name">
                                        <ValidationRule>
                                               <ej:KeyValue Key="required" Value="true" />
                                        </ValidationRule>
                                        <ValidationMessage>
                                            <ej:KeyValue Key="required" Value="Need to enter a report Name" />
                                        </ValidationMessage>
                                    </ej:MaskEdit>

But when i run the page it doesn't run the validation, 
when does it need to run the validation? when leaving focos of the control or when clicking a ej:button?

my reference as the documentation states 
<script src="Scripts/jquery.validate.min.js" type="text/javascript"></script>

this one is included when i create the solution using the visual studio template for syncfusion c#.

My current version of EJ is 14.1460.0.46


Jayaprakash Kamaraj [Syncfusion]
Replied On May 27, 2016 02:40 PM UTC

Hi Gabriel 
 
Here validation will be performed, while clicking a ej:button.   
  
Also we have analyzed the reported problem and it occurs due to following reason.  
  
By default, jQuery contains some settings for the validation and it ignores hidden elements in from validation. But some of our EJ components (“Checkbox”, “MaskEdit”,”NumericTextbox”, “CurrencyTextbox”, “PercentageTextbox”, “RTE”, “Dropdownlist” ) contains hidden fields with values, these values need to be validated at here. So to perform the validation properly, you have to set “[]” in “ignore” API of “$.validator.setDefaults”. If validation gets fail, in-built “error” class will be added to corresponding element. Here you can specify a custom class with your own style using “errorClass” API and you can place the error message in necessary position using “errorPlacement” API. Refer following code block to customize the default jQuery validation settings.  
 
         
      $.validator.setDefaults({  
           //to validate all fields(hidden also)  
           ignore: [],  
           //if we don’t set custom class, default “error” class will be added  
           errorClass: 'e-validation-error',  
           //it specifies the error message display position  
           errorPlacement: function (error, element) {  
               $(error).insertAfter(element.closest(".e-widget"));  
           }  
       });  
 
Previously, we have specified above settings in source level, but it creates problems in validation behavior while having multiple controls in a form. Also user not able to override the inner settings, which is available in source. In form validation, these settings are common for all controls that is available in the form. So you need to provide this custom settings in sample level and you can customize it as per your requirement.   
 
  
In 14.1.0.41 version, we have made breaking change and you can find it through our release notes  
  
  
 
So, before rendering Maskedit control, you have to specify above mentioned settings in your sample. we have prepared a sample based on this and you can find it under following location.  
 
  
 Also we  will update these details in our document as soon as possible.  
  
Please let us know, if you have any concerns.  
 
Regards  
 
Jayaprakash K. 


Gabriel Obando
Replied On May 28, 2016 02:26 PM UTC

hello guys, thanks for you sample I managed to make the fields validate, these are the controls i tried to validate with success.
MaskEdit
DatePicker
NumericTextbox
CurrencyTextbox
PercentageTexbox

Just a few observations:
1-. The MaskEdit validates but when typing in a value the error message does not go away unless you hit the submit button. This does not happen with the other controls.
2-. My scenario is having a CRUD in a EjTab control with several tabs, if i hit a button on tab 1, then it validates all the controls on Tab 2 and viceversa. How can i validate just the controls in the tab where the button was clicked?

I've seen another tool for  validation is called jquery.validationEngine.js.? is this compatible with ejControls?

Attach you will see my sample solution using Vs community and like i said before the version of the controls im using is 14.1460.0.46

Attachment: ValidationTest_d0ea3235.rar

Balamurugan P [Syncfusion]
Replied On May 30, 2016 01:28 PM UTC

  
Hi Gabriel  
 
Currently, we are validating your query and we will get back to you by tomorrow (31st May 2016 ) with sample.  
  
Please let us know if you have any concerns  
  
Regards  
Balamurugan  


Gabriel Obando
Replied On May 30, 2016 02:00 PM UTC

thanks for your reply I'll be looking forward for your sample.

sureshkumar.P [Syncfusion]
Replied On May 31, 2016 12:31 PM UTC

Hi Gabriel, 
  
We have checked with your query” The MaskEdit validates but when typing in a value the error message does not go away unless hit the submit button” and created a new incident(I157912) under your account to track the status of the issue reported in this forum.  
 
Please log on to our support website to check for further updates. 
 
 
Regards, 
Sureshkumar P  


Gabriel Obando
Replied On May 31, 2016 01:27 PM UTC

Hi Gabriel, 
  
We have checked with your query” The MaskEdit validates but when typing in a value the error message does not go away unless hit the submit button” and created a new incident(I157912) under your account to track the status of the issue reported in this forum.  
 
Please log on to our support website to check for further updates. 
 
 
Regards, 
Sureshkumar P  


Hi , thanks, for your reply, 
How about validating controls on one tab instead of all the controls in several tabs?

this is my previous post:
"My scenario is having a CRUD in a EjTab control with several tabs, if i hit a button on tab 1, then it validates all the controls on Tab 2 and viceversa. How can i validate just the controls in the tab where the button was clicked?"

Keerthana Rajendran [Syncfusion]
Replied On June 6, 2016 12:04 PM UTC

Hi Gabriel,   
   
Sorry for the inconvenience caused.   
   
By default, jQuery validation will ignore all the hidden elements in the form, but for some of our controls, we need to validate for some of the hidden elements. Henceforth we have updated the  
” ignore “attribute in jQuery validation based on tab active item. Please have a below code snippet:    
   
<code>   
$.validator.setDefaults({   
              //to validate hidden fields with e-form-validate class   
              ignore: ":hidden:not(input.e-form-validate)",   
              //if we don’t set custom class, default “error” class will be added   
              errorClass: 'e-validation-error',   
              //it specifies the error message display position   
              errorPlacement: function (error, element) {   
                  $(error).insertAfter(element.closest(".e-widget"));   
              }   
</code>   
  
   
   
<code>   
function activetab()   
      {   
          $("#MainContent_Tab1").find(".e-form-validate").removeClass("e-form-validate");   
          $("#MainContent_Tab1").find(".e-active-content").find("input:hidden").addClass("e-form-validate");   
   
      }   
</code>   
   
  
   
In the above code we have added e-form-validate class to hidden elements which are available in active content of tab and bind this function to create and “itemactive” event of tab.   
    
We have prepared a sample to validate only controls on a single tab. Please refer the below given link   
   
  Please let us know if you have further queries   
  Regards,   
Keerthana.   
 
  
  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;