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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Vaildation in aspx page using javascript

Thread ID:

Created:

Updated:

Platform:

Replies:

127217 Nov 3,2016 09:07 AM UTC Nov 4,2016 10:49 AM UTC JavaScript 3
loading
Tags: ejDropDownList
rajivgandhi
Asked On November 3, 2016 09:07 AM UTC

Hi Team,
                           controls like dropdown,textbox Vaildation in aspx page using javascript

Prince Oliver [Syncfusion]
Replied On November 4, 2016 07:13 AM UTC

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:   
  
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:   
  
Regards,   
Prince  


rajivgandhi
Replied On November 4, 2016 10:20 AM UTC

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
Replied On November 4, 2016 10:49 AM UTC

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:   
  
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:   
  
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>

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;