How implement validation on controls in a DialogTemplate

[Oscar Daniel Vega Castaneda]

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

[Jayaprakash Kamaraj]

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]

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]

Attachment

[Oscar Daniel Vega Castaneda]

Attach

Attachment: GridMasterDetailsCRUD_2075e304.rar

[Jayaprakash Kamaraj]

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]

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

[Prasanna Kumar Viswanathan]

Hi Oscar,
 
We are happy that the provided solution working fine at your end.
 
Regards,
Prasanna Kumar N.S.V

[Gabriel Obando]

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]

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  

  

http://help.syncfusion.com/js/release-notes/v14.1.0.41?type=all#common-breaking-changes   

  

 

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.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/121340/ze/MaskEdit-1666803196   

  

 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]

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]

  

Hi Gabriel  

 

Currently, we are validating your query and we will get back to you by tomorrow (31^st May 2016 ) with sample.  

  

Please let us know if you have any concerns  

  

Regards  

Balamurugan  

[Gabriel Obando]

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

[Sureshkumar P]

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. 

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

 

 

Regards, 

Sureshkumar P  

[Gabriel Obando]

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. 

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

 

 

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]

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   

   

Sample Link: http://www.syncfusion.com/downloads/support/forum/121340/ze/Sample951498408.zip   

  Please let us know if you have further queries   

  Regards,   

Keerthana.