This is a migrated thread and some comments may be shown as answers.

problems using asp.net client side javascript functions for the validators

4 Answers 370 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Marc asked on 11 Apr 2009, 06:24 PM

This is a problem using the javascript functions of the asp.net validators on the client with the rad editor.

I did not have problems when I was using the validators on a page but when i want to do validation on the client using the client side javascript function of the asp.net validators I get this error:

the validator always is triggered and fails the validation even thought there is some text in the editor. But if I put an <img></img> tag then it passes the validation:

for example this does not validate:

iuyuy<br />
qqwwq<br />
<br />
<span style="color: #ff0000">qwwqe</span><br />

but this does validate:

iuyuy<br />
qqwwq<br />
<br />
<span style="color: #ff0000">qwwqe</span><br /><img></img>

this small example reproduces the problem:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default43.aspx.vb" Inherits="Default43" %>

@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html xmlns="http://www.w3.org/1999/xhtml">

head runat="server">

head>

body>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

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

<asp:RequiredFieldValidator ControlToValidate="TextBox1" ID="RequiredFieldValidator2" runat="server"

ErrorMessage="RequiredFieldValidator" Display="Dynamic"></asp:RequiredFieldValidator>

<telerik:RadEditor ID="RadEditor1" Runat="server">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="AddImageBut" ShowIcon="true" />

<telerik:EditorTool Name="AddVideoBut" ShowIcon="true" />

</telerik:EditorToolGroup>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Bold" />

<telerik:EditorTool Name="JustifyCenter" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="Underline" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="ForeColor" />

<telerik:EditorTool Name="BackColor" />

<telerik:EditorSeparator />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

</div>

<asp:Button OnClientClick="ValidateMe();return false;" ID="Button1" runat="server" Text="Button" />

<asp:RequiredFieldValidator ControlToValidate="RadEditor1" ID="RequiredFieldValidator1" runat="server"

ErrorMessage="RequiredFieldValidator" Display="Dynamic"></asp:RequiredFieldValidator>

</form>

body>

html>

script type="text/javascript" language="javascript">

var val = '<%= RequiredFieldValidator1.ClientID %>';

var val2 = '<%= RequiredFieldValidator2.ClientID %>';

var edi = '<%= RadEditor1.ClientID %>';

function ValidateMe() {

ValidatorValidate($get(val));

ValidatorValidate($get(val2));

if ($get(val).isvalid && $get(val2).isvalid) {

alert(

'valid');

}

else {

alert(

'not valid');

}

script>

4 Answers, 1 is accepted

answered on 16 Apr 2009, 03:13 PM

this is from Microsoft documentation:

http://msdn.microsoft.com/en-us/library/aa479045.aspx

The Client-Side API

There is a mini-API that you can use on the client to achieve various effects with your own client-side code. Because it is not possible to make certain routines hidden, you can theoretically make use of any of the variables, attributes, and functions defined by client-side validation script. However, many of them are implementation details that may be changed. Here is a summary of the client-side objects that we encourage you to use.

Table 3. Client-side objects

Name	Type	Description
Page_IsValid	Boolean variable	Indicates whether the page is currently valid. The validation scripts keep this up to date at all times.
Page_Validators	Array of elements	This is an array containing all of the validators on the page.
Page_ValidationActive	Boolean variable	Indicates whether validation should take place. Set this variable to False to turn off validation programmatically.
isvalid	Boolean property	This is a property on each client validator indicating whether it is currently valid.

Bypassing Client Validation

A common task you may need to do is to have a "Cancel" button or a navigation button on a page. In this case, set the CausesValidation property on the button to False and no validation will take place, either on the server or the client. If you lay out a page like this, you will want to check Page.IsValid in your button even handlers. If you instead call Page.Validate during Page_Load, you will not have a way of knowing whether a submit or cancel button was pushed.

Special Effects

Another common requirement is to have effects other than the error messages displayed by the validators themselves in error situations. In this case, any modifications in behavior you make need to be made on both the server and the client. Suppose you want to have a Label that changes color depending on whether an input is valid. Here is how you would do this on the server:

public class ChangeColorPage : Page {
    public Label lblZip;
    public RegularExpressionValidator valZip;
    
protected override void OnLoad(EventArgs e) {     
    Page.Validate();       
        lblZip.ForeColor = valZip.IsValid? Color.Black : Color.Red;
    }               
}

This is all very nice, but whenever you modify validation like this, you may find that it looks inconsistent unless you do an equivalent operation on the client. The validation frameworks saves you from a lot of this double effort, but for extra effects you just have to do it in two places. Here is a client fragment that does the same thing:

<asp:Label id=lblZip runat=server 
   Text="Zip Code:"/> 
<asp:TextBox id=txtZip runat=server 
   OnChange="txtZipOnChange();" /></asp:TextBox><br>
<asp:RegularExpressionValidator id=valZip runat=server
   ControlToValidate=txtZip
   ErrorMessage="Invalid Zip Code" 
   ValidationExpression="[0-9]{5}" /><br>

<script language=javascript>
function txtZipOnChange() {
   // Do nothing if client validation is not active
   if (typeof(Page_Validators) == "undefined")  return;
   // Change the color of the label
   lblZip.style.color = valZip.isvalid ? "Black" : "Red";
}
</script>

Client-Side APIs

Some additional scenarios are enabled by functions that can be called from your client-side script.

Table 4. Functions called from client-side script

Name	Description
ValidatorValidate(val)	Takes a client-validator as input. Makes the validator check its input and update its display.
ValidatorEnable(val, enable)	Takes a client-validator and a Boolean value. Enables or disables a client validator. Being disabled will stop it from evaluating and it will always appear valid.
ValidatorHookupControl(control, val)	Takes an input HTML element and a client-validator. Modifies or creates the element's change event so that it updates the validator when changed. This can be useful for custom validators that depend on multiple input values.

Of particular use is to be able to enable or disable validators. If you have validation that you want active only in certain scenarios, you may need to change the activation on both server and client, or you will find that the user cannot submit the page.

Here is the previous example with a field that should only be validated when a check box is unchecked:

    public class Conditional : Page {
        public HtmlInputCheckBox chkSameAs;
        public RequiredFieldValidator rfvalShipAddress;
        public override void Validate() {
            bool enableShip = !chkSameAs.Checked;
            rfvalShipAddress.Enabled = enableShip;
            base.Validate();
        }
    }

Here is the client-side equivalent:

<input type=checkbox runat=server id=chkSameAs 
   onclick="OnChangeSameAs();" >Same as Billing<br>
<script language=javascript>
function OnChangeSameAs() {
    var enableShip = !event.srcElement.status;
    ValidatorEnable(rfvalShipAddress, enableShip);
}
</script>

answered on 21 Apr 2009, 03:31 PM

validatecontent.zip

Hello Marc,

We managed to find a solution in advance and it is to set the editor's content before validating it:

<script type="text/javascript" language="javascript">
var val = '<%= RequiredFieldValidator1.ClientID %>';
var val2 = '<%= RequiredFieldValidator2.ClientID %>';

function ValidateMe()
{
    //Telerik new code
    var edi = $find('<%= RadEditor1.ClientID %>');
    edi.set_html(edi.get_html(true)); //get the current content and set it before the validation

    ValidatorValidate($get(val));
    ValidatorValidate($get(val2));
    if ($get(val).isvalid && $get(val2).isvalid)
    {
        alert('valid');
    }
    else
    {
        alert( 'not valid');
    }
}
</script>

For your convenience I have attached my test page.

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.