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. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. jQuery Validate Required Column

jQuery Validate Required Column

We are making use of the grid to capture records.

Here is the jsplayground for it:


If you click + to add a record, then select active ingredient, then select supplier - then click on SAVE - the supplier is still required even though it has been selected. Why is this?



5 Replies
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 21, 2019 01:21 PM UTC

Hi Malcolm, 

Thanks for contacting Syncfusion Support. 

Query#:- If you click + to add a record, then select active ingredient, then select supplier - then click on SAVE - the supplier is still required even though it has been selected. Why is this? 
 
We can reproduce your reported problem at our end and the issue occurs due to special characters given in the Field Name as well as Grid id. We have rendered the input element of the form based on the column’s FieldName. In our source, we have get the  input element based on the Id. When the id contain special character, we couldn’t get the input element while on traversing which is the jquery behavior. We used JsRender to render the Grid and helper function in which we couldn’t perform jquery operations using special characters 
 
We have already discussed about this topic in our knowledge base document. Please refer the following link to our kb,  

Refer to the modified sample Link:- 

To overcome this we suggest you to avoid special characters on FieldName as well as Grid id. 

Regards, 
Farveen sulthana T 


MV Malcolm van Staden October 21, 2019 04:18 PM UTC

Hi,

Thank you for that information, however based on the KB link, an underscore is a valid character. Why is it necessary to not use the underscore _ ? The field active_ingredient_id doesn't appear to suffer from the same problem either?

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 22, 2019 03:57 PM UTC

Hi Malcolm, 

The same problem occurs for active_ingredient_id when we  provide empty dataSource for the column on columns property on rendering. As per previous update When the id of the fieldname contain special character, we couldn’t get the input element while on traversing which is the jquery behavior. We have rendered the Grid using jquery we couldn’t perform operations as per we expect while using special characters. 

So we suggest you to avoid specialCharacters for the fieldname to resolve the problem. 

Regards, 
Farveen sulthana T 


MV Malcolm van Staden October 23, 2019 07:48 AM UTC

Hi,

I'm having difficulty understanding what is or isn't special characters.

From the KB article:
Hence we must use only valid JavaScript name characters (a-z, A-Z, 0-9, _, $) as a grid id

_ is listed as a valid JavaScript character name. Where does it state that the underscore is a special character?

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team October 24, 2019 12:44 PM UTC

Hi Malcolm, 

We are very sorry for the previous updates. 

Further analyzing it was not relates to Jquery problem. When we define ForeignKey column by default it will render the column with dropdownList. When we re-render the dropdownList it will leads to conflict and validation not occurred properly for that column which is the cause of the issue.  

In order to avoid this problem we suggest you to destroy the dropdownList and render the dropdownList with dataSource  as like below code example:- 

<script type='text/javascript'> 
jQuery(function ($) { 
    $('#active_ingredients_grid').ejGrid({ 
      dataSource: [], 
    columns : [ 
          { field: "id", visible: false, isPrimaryKey: true }, 
       
    ], 
     
      actionComplete : function complete(args){ 
        if (args.requestType === 'save'){ 
        }        
        if (args.requestType === 'add' || args.requestType === 'beginedit') { 
            $('#active_ingredients_gridactive_ingredient_id').ejDropDownList({ select: function(args){ 
              $('#active_ingredients_grid').ejWaitingPopup('show'); 

                .       .       . 
                $('#active_ingredients_gridsupplier_id').ejDropDownList('destroy'); 
               $('#active_ingredients_gridsupplier_id').ejDropDownList({  
                 dataSource : items, 
                   width:'100%', 
                fields: { text: 'name', value: 'value' } 
              }); 
                 
              $('#active_ingredients_grid').ejWaitingPopup('hide'); 
            } 
            }); 
        } 
      }      
    }); 
  });     
     
  </script> 


Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 



Loader.
Up arrow icon