Tuesday, October 11, 2011

JavaScript validation for AJAX HTML editor

As I told before I am very weak in JavaScript, still I am trying to do some validation using JavaScript. Here in this example I am using JavaScript to check wether AJAX html editor is empty or not. If it is empty, it will show content can not be empty. In my project I have a master page, but I am putting the validation in a different page.
The Javascript function I have written inside
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script language="javascript" type="text/javascript">
        function validateposting() {
            var strtitle = document.getElementById("ctl00_ContentPlaceHolder1_txtTitle").value;
            var a = $find("<%=Editor1.ClientID%>");
            var value = a.get_content();
            if (document.getElementById("ctl00_ContentPlaceHolder1_txtTitle").value == "") {
                document.getElementById("ctl00_ContentPlaceHolder1_txtTitle").focus();
                alert('Title is required');
                return false;
            }
            if (value == "") {
                alert('Content is required');
                return false;
            }
        }
 </script>

Here I have put ctl00_ContentPlaceHolder1_ and the control id in the getelementbyid method, because this control in inside the content place holder and this name ctl00_ContentPlaceHolder1_txtTitle is generating at the run time. It will applicable to every control inside the content place holder.

And in the button submit button I have written like below
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" OnClientClick="return validateposting();" />
We have to call the Javascript method in the OnClientClick method of the button.
Also I am giving you some Javascript validation samples.

To check blank for a normal asp.net text box:
if (document.getElementById("ctl00_ContentPlaceHolder1_txtEmailIDLogin").value == "") {
                document.getElementById("ctl00_ContentPlaceHolder1_txtEmailIDLogin").focus();
                alert('Email is required');
                return false;
            }
To check wether the imput email id is in corrent format:
if (document.getElementById("ctl00_ContentPlaceHolder1_txtEmailIDLogin").value != "") {
                var email = document.getElementById("ctl00_ContentPlaceHolder1_txtEmailIDLogin");
                var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
                if (!filter.test(email.value)) {
                    alert('Please provide a valid email address');
                    email.focus();
                    return false;
To check wether the password is between 4 to 20 characters.
if (document.getElementById("ctl00_ContentPlaceHolder1_txtPasswordSignUp").value != "") {
                var email = document.getElementById("ctl00_ContentPlaceHolder1_txtPasswordSignUp");
                var filter = /[^\s]{4,20}/;
                if (!filter.test(email.value)) {
                    alert('Password must be 4 to 20 characters');
                    email.focus();
                    return false;
                }
            }
To check wether the new password matches with the confirm password:
 var strnewpassword = document.getElementById("ctl00_ContentPlaceHolder1_txtNewPassword").value;
 var strconfirmpassword = document.getElementById("ctl00_ContentPlaceHolder1_txtConfirmPassword").value;
 if (strnewpassword != strconfirmpassword) {
                alert('New password and Confirm password did not match.');
                return false;
            } 

No comments:

Post a Comment