validate dynamic form

[George]

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?

[Hetali]

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

[George]

[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

[/quote]

 

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

[Hetali]

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

[George]

In this example, it's not picking up the dropdown, how can we get this to pick up the dropdown if required?

[Hetali]

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

[George]

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. 

 

[Hetali]

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

[Mohammed]

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

 

[Petar]

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