This is a migrated thread and some comments may be shown as answers.

validate dynamic form

9 Answers 494 Views
Validation
This is a migrated thread and some comments may be shown as answers.
George
Top achievements
Rank 1
George asked on 17 Sep 2019, 02:12 PM

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?

9 Answers, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 18 Sep 2019, 09:44 PM

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.
0
George
Top achievements
Rank 1
answered on 18 Sep 2019, 11:46 PM
[quote]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.

[/quote]

 

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

0
Hetali
Telerik team
answered on 19 Sep 2019, 09:09 PM

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.
0
George
Top achievements
Rank 1
answered on 23 Sep 2019, 12:56 PM
In this example, it's not picking up the dropdown, how can we get this to pick up the dropdown if required?
0
Hetali
Telerik team
answered on 23 Sep 2019, 02:33 PM

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.
0
George
Top achievements
Rank 1
answered on 23 Sep 2019, 08:36 PM

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. 

 

0
Hetali
Telerik team
answered on 23 Sep 2019, 10:24 PM

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.
0
Mohammed
Top achievements
Rank 1
Veteran
answered on 24 May 2020, 09:28 AM

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

 

0
Petar
Telerik team
answered on 26 May 2020, 04:04 PM

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.
Tags
Validation
Asked by
George
Top achievements
Rank 1
Answers by
Hetali
Telerik team
George
Top achievements
Rank 1
Mohammed
Top achievements
Rank 1
Veteran
Petar
Telerik team
Share this question
or