Tuesday, May 5, 2015

JavaScript validation for AJAX HTML editor

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