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. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Vaildation in aspx page using javascript

Vaildation in aspx page using javascript

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

3 Replies
PO Prince Oliver Syncfusion Team 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  


RA rajivgandhi 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>

RA rajivgandhi replied to Prince Oliver 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>

Loader.
Up arrow icon