ASP - NET - 2 - CustomValidator - Javascript - Custom msg not show

Discussion in 'ASP .Net' started by Richard, Sep 8, 2010.

  1. Richard

    Richard Guest

    Hi,

    On an ASP.NET 2 there's a CustomValidator with EnableClientScript="true" and
    the ClientValidationFunction set to a Javascript function shown below. The
    validator has no ControlToValidate b/c inside the function several controls,
    and not just one need to be validated.

    The need is to have a validation control that fires, and sets the IsValid
    appropriately on the page, and allows the displayed message to be set by code
    in the client (Javascript). What we don't want is to have multiple validation
    controls on the page just to perform simple validation.

    The Javascript function that handles the ClientValidationFunction property
    of the customvalidator is:

    function CustValMyForm(source, arguments)
    {
    arguments.IsValid = ValMyForm(); // This function performs the
    actual validation.
    return;
    }

    function ValMyForm()
    {
    var txtFileCode =
    document.getElementById("<%=txtFileCode.ClientId %>");
    var cvError = document.getElementById("<%=cvErrorRen.ClientId
    %>");

    var sFileCode = Trim(txtFileCode.value);

    if (sFileCode.length < 1)
    {
    cvError.InnerText = "Please enter a value.";
    txtFileCode.focus();
    return false;
    }

    if (IsNotNumeric(sFileCode))
    {
    cvError.InnerText = "Value must be numeric.";
    txtFileCode.focus();
    return false;
    }

    // Code continues...other controls are validated, etc...

    return true;
    }

    The CustomValidator does fire, and it calls the functions in Javascript, but
    whatever value is set in the Text property of the CustomValidator on the page
    at design time, is displayed when an invalid value is detected by the
    validation. The Javascript code somehow fails to change the message according
    to the error.
    The following variations have been tested, and the result is the same:
    a) Using InnerText: cvError.InnerText = "Value must be
    numeric.";
    b) Using InnerHTML: cvError.InnerHTML = "Value must be
    numeric.";
    c) Using sender.errormessage: sender.errormessage = "Value must be
    numeric.";

    This is how the custom validator gets rendered on the resulting webpage:

    <span id="ctl00_cphMyMaster_cvError"
    style="display:inline-block;color:Red;width:160px;visibility:hidden;"></span>

    And there's no way to change the "visibility:hidden" part of the style
    attribute either from the Javascript function or by setting it on the
    CustomValidator at design time.
    This is a simple validation... why does it have to be such a headache!?

    Your help will be greatly appreciated.

    Thanks in advance,

    Richard
     
    Richard, Sep 8, 2010
    #1
    1. Advertising

  2. Richard

    Scott M. Guest

    AFAIK each validator control MUST have its ControlToValidate property set.


    "Richard" <> wrote in message
    news:...
    > Hi,
    >
    > On an ASP.NET 2 there's a CustomValidator with EnableClientScript="true"
    > and
    > the ClientValidationFunction set to a Javascript function shown below. The
    > validator has no ControlToValidate b/c inside the function several
    > controls,
    > and not just one need to be validated.
    >
    > The need is to have a validation control that fires, and sets the IsValid
    > appropriately on the page, and allows the displayed message to be set by
    > code
    > in the client (Javascript). What we don't want is to have multiple
    > validation
    > controls on the page just to perform simple validation.
    >
    > The Javascript function that handles the ClientValidationFunction property
    > of the customvalidator is:
    >
    > function CustValMyForm(source, arguments)
    > {
    > arguments.IsValid = ValMyForm(); // This function performs the
    > actual validation.
    > return;
    > }
    >
    > function ValMyForm()
    > {
    > var txtFileCode =
    > document.getElementById("<%=txtFileCode.ClientId %>");
    > var cvError = document.getElementById("<%=cvErrorRen.ClientId
    > %>");
    >
    > var sFileCode = Trim(txtFileCode.value);
    >
    > if (sFileCode.length < 1)
    > {
    > cvError.InnerText = "Please enter a value.";
    > txtFileCode.focus();
    > return false;
    > }
    >
    > if (IsNotNumeric(sFileCode))
    > {
    > cvError.InnerText = "Value must be numeric.";
    > txtFileCode.focus();
    > return false;
    > }
    >
    > // Code continues...other controls are validated, etc...
    >
    > return true;
    > }
    >
    > The CustomValidator does fire, and it calls the functions in Javascript,
    > but
    > whatever value is set in the Text property of the CustomValidator on the
    > page
    > at design time, is displayed when an invalid value is detected by the
    > validation. The Javascript code somehow fails to change the message
    > according
    > to the error.
    > The following variations have been tested, and the result is the same:
    > a) Using InnerText: cvError.InnerText = "Value must be
    > numeric.";
    > b) Using InnerHTML: cvError.InnerHTML = "Value must be
    > numeric.";
    > c) Using sender.errormessage: sender.errormessage = "Value must be
    > numeric.";
    >
    > This is how the custom validator gets rendered on the resulting webpage:
    >
    > <span id="ctl00_cphMyMaster_cvError"
    > style="display:inline-block;color:Red;width:160px;visibility:hidden;"></span>
    >
    > And there's no way to change the "visibility:hidden" part of the style
    > attribute either from the Javascript function or by setting it on the
    > CustomValidator at design time.
    > This is a simple validation... why does it have to be such a headache!?
    >
    > Your help will be greatly appreciated.
    >
    > Thanks in advance,
    >
    > Richard
    >
    >
    >
     
    Scott M., Sep 12, 2010
    #2
    1. Advertising

  3. Richard

    theacadian

    Joined:
    Mar 3, 2011
    Messages:
    1
    Though this is an old post, this seemed like a good idea, so I played around with the code to get some practice.

    SOLUTION 1:

    I think you could just achieve what you were trying to do by -

    0. Not using any Validation controls at all. Place a DIV instead of a CustomValidator

    1. specifying an empty DIV - <div id="errDiv"><div>

    2. specify OnClientClick="return ValidateForm();" for the Submit button
    (Note that "return" is important here. The function should return False to prevent the button from doing a postback)

    3. In the ValidateForm() javascript function - show error messages using innerHTML property of errDiv
    Code:
     e.g.
    <asp:TextBox ID="txtStartDate" runat="server" ></asp:TextBox>
    <asp:TextBox ID="txtEndDate" runat="server" ></asp:TextBox>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit"
               CausesValidation="true" onclick="btnSubmit_Click" 
                   OnClientClick="[B]return [/B][B]ValidateForm[/B]();" />
    <div id="errDiv">
    </div>
    
    function [B]ValidateForm[/B]() {
                 [B]var errorDiv = document.getElementById("errDiv");[/B]
    
                 var startDate =document.getElementById('txtStartDate').value;
                 var endDate = document.getElementById('txtEndDate').value;
                 
                 var isValid = true;
                 var errorMessage = '<ol>';
                 
                 if (!isValidDate(startDate)) {
                     errorMessage=errorMessage + '<li>StartDate invalid</li>';
                     isValid = false;
                 }
                 if (!isValidDate(endDate)) {
                     errorMessage=errorMessage + '<li>EndDate invalid</li>';
                     isValid = false;
                 }
                 
                 errorMessage = errorMessage + '</ol>';
                 [B]errorDiv.innerHTML = errorMessage;[/B]
    
                 return isValid;
             }
    
    SOLUTION 2:
    I used jquery to achieve the manipulation of the error message in CustomValidator's span tag. That solution is below.

    For a CustomValidator, it is not mandatory to specify ControlToValidate property - http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.customvalidator.aspx

    Code:
    <asp:TextBox ID="txtStartDate" runat="server" ></asp:TextBox>
    <asp:TextBox ID="txtEndDate" runat="server" ></asp:TextBox>
    
    <asp:CustomValidator ID="[B]custom[/B]" runat="server"  
         ClientValidationFunction="[B]ValidateForm[/B]">
    </asp:CustomValidator>
    
    function [B]ValidateForm[/B](source, args) {
                 //clear error message list by removing <ol> tag
                 $("[id$=[B]custom[/B]] ol").remove();
    
                 //recreate <ol> tag
                 $("[id$=[B]custom[/B]]").append('<ol>');
    
                 args.IsValid = true;
    
                 // start adding error messages as <li> tags
    
                 if (!isValidDate($("#txtStartDate").val())) {
                     $("[id$=[B]custom[/B]] ol").append('<li>StartDate invalid</li>');
                     args.IsValid = false;
                 }
                 if (!isValidDate($("#txtEndDate").val())) {
                     $("[id$=[B]custom[/B]] ol").append('<li>EndDate invalid</li>');
                     args.IsValid = false;
                 }
                 $("[id$=[B]custom[/B]] ol").append('</ol>');
                 return args.IsValid;
             }
    In the above example, a CustomValidator is used to validate 2 TextBox controls and show error messages in a <ol> .

    From your code, it is apparent that the CustomValidator is getting rendered as a <span> tag. So the <ol> alongwith the <li> are put into that span tag using the above jquery code..

    I used jquery to make the javascript coding easier for me. But I realized I do not know how to make it work without jquery. I tried your javascript code and as you mentioned, it was not having any effect on the <span> tag.. This is probably an example why jquery seems so useful.

    $("[id$=custom]") - I think this selects the element whose ID ends with "custom".. (I am not sure about how it works)

    isValidDate() is a javascript function that I wrote for my purposes.

    $("#txtStartDate").val() - jquery selector to select textbox and gets its value

    Hope this helps..
     
    Last edited: Mar 3, 2011
    theacadian, Mar 3, 2011
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?UmljaA==?=
    Replies:
    5
    Views:
    907
    Juan T. Llibre
    May 13, 2005
  2. akila_natarajan

    Read .msg attachment from a mail(.msg)

    akila_natarajan, May 13, 2011, in forum: Java
    Replies:
    0
    Views:
    403
    akila_natarajan
    May 13, 2011
  3. Nir Erlich

    CustomValidator error doesl not show in ValidationSummary

    Nir Erlich, Sep 15, 2003, in forum: ASP .Net Web Controls
    Replies:
    4
    Views:
    348
    Nir Erlich
    Sep 17, 2003
  4. Charles Lowe
    Replies:
    0
    Views:
    233
    Charles Lowe
    May 13, 2007
  5. Charles Lowe
    Replies:
    0
    Views:
    178
    Charles Lowe
    Aug 22, 2007
Loading...

Share This Page