Vaildation in aspx page using javascript

[rajivgandhi]

Hi Team,

                           controls like dropdown,textbox Vaildation in aspx page using javascript

[Prince Oliver]

Hi Rajivgandhi,   

  

In order to validate dropdownlist and textbox in aspx page using javascript, have a look at the below aspx code.   

<div class="control">   

            <div class="ctrllabel">Select a Section</div>   

            <ej:DropDownList ID="dropdown" runat="server" ClientSideOnChange="onchange">   

                <ValidationRule>   

                    <ej:KeyValue Key="required" Value="true" />   

                </ValidationRule>   

                <ValidationMessage>   

                    <ej:KeyValue Key="required" Value="The Dropdown value is required" />   

                </ValidationMessage>   

            </ej:DropDownList>   

            <span class="errmsg" ></span>   

        </div>   

        <div class="control">   

            <div class="ctrllabel">Enter a Name</div>   

            <asp:TextBox ID="text" runat="server"></asp:TextBox>   

            <span class="errmsg"></span>   

        </div>   

  

  

Dropdownlist control has API support for JQuery validation through validation message and validation rules API.    

  

Refer to the following link for more information on dropdownlist validation:   

https://help.syncfusion.com/aspnet/dropdownlist/validation   

  

In order to validate dropdownlist using jQuery validation plugin, you need to set defaults for the validator. Refer to the following code snippet and add it in the script section.   

  

<script type="text/javascript">   

       $.validator.setDefaults({   

            ignore: [], // to include hidden input validation   

            errorClass: 'e-validation-error', // to get the error message on jquery validation   

            errorPlacement: function (error, element) {   

                $(element).closest("div.control").find("span.errmsg").append(error);   

            }// to place error message   

        });   

   

       $(function () {   

              // Adding validation rules for textbox   

            $('#<%=text.ClientID%>').rules("add", { required: true });   

                 

                           

       });   

                         

     function onchange() {   

         $("form").valid();// To validate dropdownlist upon value change   

     }   

                         

    </script>   

  

  

Note: To include dropdownlist in validation, you have to clear the ignore in setDefaults because by default in jQuery validation the hidden inputs are ignored from validation and our dropdownlist has the input element hidden.      

  

Refer to the following sample:   

http://www.syncfusion.com/downloads/support/forum/127217/ze/aspvalidation-108883607   

  

Regards,   

Prince  

[rajivgandhi]

Hi Team,

                                             i pasted my code below ,getting  error on button click   Uncaught TypeError: Cannot read property 'form' of undefined(…) validationSynfucusion.js:2

<form id="custom">

<table>

<tr>

                    <td class="e-leftfields e-textlabel" style="width: 20%;">

                        Job Type:

                    </td>

                    <td style="width: 1%;">

                        <input type="text" id="ddlAddJobType" />

                        <span class="errmsg" ></span>

                    </td>

<td> <button type="submit" onclick="save()" id="btnsubmit" style="float: left; margin-left: 38%;

                margin-bottom: 10px;">

                Save</button></td>

</table> 

</form>

 <script type="text/javascript">

 $.validator.setDefaults({

            ignore: [], // to include hidden input validation   

            errorClass: 'e-validation-error', // to get the error message on jquery validation   

            errorPlacement: function (error, element) {

                $(element).closest("div.control").find("span.errmsg").append(error);

            } // to place error message   

        });   

var JobTypes=[{JobTypeDescription:"job",JobTypeID:"1"}]

   $('#ddlAddJobType').ejDropDownList({

                        dataSource: JobTypes,

                        fields: {

                            text: "JobTypeDescription",

                            value: "JobTypeID"

                        },

                         validationRules: {

                required: true

            },

            validationMessage: {

                required: "Select JobType value"

            },

                        watermarkText: "Select Job Type"

                        //                        htmlAttributes: {

                        //                            style: "border:1px solid red;"

                        //                        }

                    });

function save()

{

 $("custom").valid();

}

</script>

[rajivgandhi]

Hi Rajivgandhi,   

  

In order to validate dropdownlist and textbox in aspx page using javascript, have a look at the below aspx code.   

<div class="control">   

            <div class="ctrllabel">Select a Section</div>   

            <ej:DropDownList ID="dropdown" runat="server" ClientSideOnChange="onchange">   

                <ValidationRule>   

                    <ej:KeyValue Key="required" Value="true" />   

                </ValidationRule>   

                <ValidationMessage>   

                    <ej:KeyValue Key="required" Value="The Dropdown value is required" />   

                </ValidationMessage>   

            </ej:DropDownList>   

            <span class="errmsg" ></span>   

        </div>   

        <div class="control">   

            <div class="ctrllabel">Enter a Name</div>   

            <asp:TextBox ID="text" runat="server"></asp:TextBox>   

            <span class="errmsg"></span>   

        </div>   

  

  

Dropdownlist control has API support for JQuery validation through validation message and validation rules API.    

  

Refer to the following link for more information on dropdownlist validation:   

https://help.syncfusion.com/aspnet/dropdownlist/validation   

  

In order to validate dropdownlist using jQuery validation plugin, you need to set defaults for the validator. Refer to the following code snippet and add it in the script section.   

  

<script type="text/javascript">   

       $.validator.setDefaults({   

            ignore: [], // to include hidden input validation   

            errorClass: 'e-validation-error', // to get the error message on jquery validation   

            errorPlacement: function (error, element) {   

                $(element).closest("div.control").find("span.errmsg").append(error);   

            }// to place error message   

        });   

   

       $(function () {   

              // Adding validation rules for textbox   

            $('#<%=text.ClientID%>').rules("add", { required: true });   

                 

                           

       });   

                         

     function onchange() {   

         $("form").valid();// To validate dropdownlist upon value change   

     }   

                         

    </script>   

  

  

Note: To include dropdownlist in validation, you have to clear the ignore in setDefaults because by default in jQuery validation the hidden inputs are ignored from validation and our dropdownlist has the input element hidden.      

  

Refer to the following sample:   

http://www.syncfusion.com/downloads/support/forum/127217/ze/aspvalidation-108883607   

  

Regards,   

Prince  

Hi Team,

                                             i pasted my code below ,getting  error on button click   Uncaught TypeError: Cannot read property 'form' of undefined(…) validationSynfucusion.js:2

<form id="custom">

<table>

<tr>

                    <td class="e-leftfields e-textlabel" style="width: 20%;">

                        Job Type:

                    </td>

                    <td style="width: 1%;">

                        <input type="text" id="ddlAddJobType" />

                        <span class="errmsg" ></span>

                    </td>

<td> <button type="submit" onclick="save()" id="btnsubmit" style="float: left; margin-left: 38%;

                margin-bottom: 10px;">

                Save</button></td>

</table> 

</form>

 <script type="text/javascript">

 $.validator.setDefaults({

            ignore: [], // to include hidden input validation   

            errorClass: 'e-validation-error', // to get the error message on jquery validation   

            errorPlacement: function (error, element) {

                $(element).closest("div.control").find("span.errmsg").append(error);

            } // to place error message   

        });   

var JobTypes=[{JobTypeDescription:"job",JobTypeID:"1"}]

   $('#ddlAddJobType').ejDropDownList({

                        dataSource: JobTypes,

                        fields: {

                            text: "JobTypeDescription",

                            value: "JobTypeID"

                        },

                         validationRules: {

                required: true

            },

            validationMessage: {

                required: "Select JobType value"

            },

                        watermarkText: "Select Job Type"

                        //                        htmlAttributes: {

                        //                            style: "border:1px solid red;"

                        //                        }

                    });

function save()

{

 $("custom").valid();

}

</script>