validate dynamic form

10 posts, 0 answers
  1. George
    George avatar
    18 posts
    Member since:
    Jul 2019

    Posted 17 Sep 2019 Link to this post

    I'm building my form dynamically and it can have checkboxes, textboxes, radio buttons, etc. is it possible to connect the validator to those dynamically? Each control will have [required] attach to it, if it's set as a required field by the users when building the form.

    so for example:

    <div id="container">
     <input type="text' id="new" required/>
     
    <br>
    <select id="ddSalesman" >
       <option>select one</option>
    </select>
     
    <input type="checkbox" id="NewOrUsed" required>
    </div>

    and so on, is there a way to connect the validator to these controls when the users clicks the button?

  2. Hetali
    Admin
    Hetali avatar
    66 posts

    Posted 18 Sep 2019 Link to this post

    Hello Mike,

    In order to dynamically attach the Kendo UI Validator to the controls with the required attribute, please add the controls in the <form> tag and a button which will attach the Validator to those controls using the onclick() function. For example:

    <div id="container">
      <form>
         <input type="checkbox" id="NewOrUsed" required/>
      </form>
      <button id="validate" onclick="validate()">Validate</button>
    </div>


    function validate(){
      $("form").kendoValidator({
         validate: function(e) {
           console.log(e.valid);
         },
         messages: {
           required: "Validator attached"
         }
       });
    }
    Please take a look at this Dojo sample where the Validator is attached to the controls on button click.

    Please let me know if this helps or if you have any further questions pertaining to the Kendo UI Validator.

    Regards,
    Hetali
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. George
    George avatar
    18 posts
    Member since:
    Jul 2019

    Posted 18 Sep 2019 in reply to Hetali Link to this post

    Hetali said:

    Hello Mike,

    In order to dynamically attach the Kendo UI Validator to the controls with the required attribute, please add the controls in the <form> tag and a button which will attach the Validator to those controls using the onclick() function. For example:

     

    <div id="container">
      <form>
         <input type="checkbox" id="NewOrUsed" required/>
      </form>
      <button id="validate" onclick="validate()">Validate</button>
    </div>

     

     

    function validate(){
      $("form").kendoValidator({
         validate: function(e) {
           console.log(e.valid);
         },
         messages: {
           required: "Validator attached"
         }
       });
    }
    Please take a look at this Dojo sample where the Validator is attached to the controls on button click.

     

    Please let me know if this helps or if you have any further questions pertaining to the Kendo UI Validator.

    Regards,
    Hetali
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

     

    the example doesn't work, when i click the validate button nothing happens

  4. Hetali
    Admin
    Hetali avatar
    66 posts

    Posted 19 Sep 2019 Link to this post

    Hello Mike,

    In the example the Kendo UI Validator connects to the controls containing the required attribute on button click as seen in this screen recording. However, the required attribute in the controls by default shows the built-in message before connecting it with the Kendo UI Validator.

    In order to show the Validator when the button is clicked, add the required attribute in the controls within the button's onclick() function as seen below:

    $("#save").click(function() {
      $("#new").attr("required", "true");
      $("#NewOrUsed").attr("required", "true");
    });

    Use the validate method to check whether all the validation rules have passed and the errors method to display the messages for the failed validation rules. For example:

     $("#save").click(function() {
      if (validatable.validate() === false) {
       var errors = validatable.errors();
      }
    });


    Please take a look at this updated Dojo sample where the Validator message is displayed when the button is clicked.

    Please let me know if this is something that you're looking for. If not, could you please reply with more details of what you're trying to achieve?

    I look forward to your reply.

    Regards,
    Hetali
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. George
    George avatar
    18 posts
    Member since:
    Jul 2019

    Posted 23 Sep 2019 in reply to Hetali Link to this post

    In this example, it's not picking up the dropdown, how can we get this to pick up the dropdown if required?
  6. Hetali
    Admin
    Hetali avatar
    66 posts

    Posted 23 Sep 2019 Link to this post

    Hi Mike,

    In order to attach a Validator to the DropDown Input, you can add the required attribute to the control using the 'id' and disable the default value as seen below:

    $("#save").click(function() {
      $("#ddSalesman").attr("required", "true");
    });

    <select id="ddSalesman" name="Option">
      <option disabled selected value>select one</option>
      <option>Option 1</option>
    </select>


    This updated Dojo sample
    attaches a Validator to the DropDown Input on button click.

    Please let me know if this helps or if you need any further help with the Kendo UI Validator.

    Regards,
    Hetali
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. George
    George avatar
    18 posts
    Member since:
    Jul 2019

    Posted 23 Sep 2019 in reply to Hetali Link to this post

    I cannot get this working on a kendodropdown. 

    so if I have a dropdown defined as a kendodropdownlist, how can I get the validator to work with it?  It works as expected on a HTML select dropdown. 

     

  8. Hetali
    Admin
    Hetali avatar
    66 posts

    Posted 23 Sep 2019 Link to this post

    Hi Mike,

    The Kendo UI Validator is working as expected with the Kendo UI DropDownList as seen in this screen recording.

    Please take a look at this running Dojo sample where the Kendo UI DropDownList has the Kendo UI Validator attached to it when you click the 'Save' button.

    Could you please update the example such that it replicates the issue faced by you? I will investigate further upon your response.

    Regards,
    Hetali
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 24 May 2020 in reply to Hetali Link to this post

    I have a grid and inside i am loading textbox and dropdown columns in page load itslef, i have a save button out side the  grid i need to validate textboxes and dropdowns in button click inside the grid.. is there any way i searched many but dint get solution ,, can you please help on this.

    Sample functionality below

    https://www.aspsnippets.com/Articles/Validate-TextBox-inside-GridView-using-jQuery-on-Button-Click-in-ASPNet.aspx

    Same i need to do

     

  10. Petar
    Admin
    Petar avatar
    438 posts

    Posted 26 May 2020 Link to this post

    Hi Mohammed,

    Can you share the implementation of the Grid component that you already have in your application? You can isolate the example in a Dojo project and send it back here or submit a support ticket with the example and details about the validation rules that you want to implement. 

    Regards,
    Petar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top