Using Validation controls and jquery.jqtransform not working

Question

4.00/5 (1 vote)

See more:

First off I know very little about styles. That said I'm working with a designer who uses "jquery.jqtransform.js". This allows a lot of pretty pictures (not a bad thing I guess). But currently on the form I building I have some very customized validation control class. When I have both the jquery and validation on the same page each control validates (there is a big alignment issue, but that a different concern) but no page validation (the page simple submits).

I removed the custom validation and used MS validation controls to no avail. Anyone experience this? Any thoughts?

Thanks in advance,

Eric

Posted 8-Mar-11 11:01am

ehwash

Add a Solution

Comments

Monjurul Habib 8-Mar-11 17:08pm

Share you code to help you.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sairam.bhat · Answer 1 · 2011-03-08T18:05:00

SQL

In your ajax return function (on the html page) you need to reapply the jquery commands you run the first time the page loads.

jQuery runs over the DOM and does what you tell it to. When the ajax call returns and replaces a part of the page, all runtime changes for that region are lost, so you need to reapply them.

Basically you need to call whatever function is called in jqtransform.js and in functions.js on page load on the html element which is replaces.

ehwash · Answer 2 · 2011-03-17T03:48:00

Sorry for the delay. I've been really busy on other projects. Below are some code snippet from the page. The Validation is a custom control written by someone else, but even if I use Microsoft's built-in validation I get the same issue. This is not a page per-se but an .ascx control on another MVC page. So there is a lot of scripts running at the same time.

The commented section at the start is the offending .js code. With it commented out like this validation works normally and prevents the page from posting. If I un-comment the script I get a beautiful page with graphics but no validation. The code-behind only populate controls and post the data.

XML

<%--    <script type="text/javascript" src="/content/XXX/js/forms/jquery.jqtransform.js" ></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            $('form.style2').jqTransform({ imgPath: '/content/XXX/js/forms/img/' });
            $('#style2').jqTransform({ imgPath: '/content/XXX/js/forms/img/' });
        });
    </script>--%>
...
<section class="int-inner">
<div id="style2">
    <form id="style2" class="style2">
        <table cellpadding="0" cellspacing="0" border="0" class="fieldsettable">
            <tr>
                <td style="width: 260px" class="fieldsettd">
                    <table>
                        <tr>
                            <td>
                                <table border="0" cellspacing="0" cellpadding="0" class="int-table">
                                    <tr>
                                        <td>
                                            <asp:DropDownList ID="ddlXState" runat="server"/>
                                            <asp:HiddenField ID="XState" runat="server" />
                                        </td>
                                        <td>
                                            <asp:DropDownList ID="ddlXsOfInterest" runat="server"/>
                                            <asp:HiddenField ID="XsOfInterest" runat="server" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table border="0" cellspacing="0" cellpadding="0" class="int-table">
                                <tr>
                                    <td>
                                        <asp:TextBox ID="DesiredDate" runat="server" />
                                    </td>
...
        </table>
        <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" RelativeTo="Element"
            Position="BottomRight" AutoTooltipify="true" ContentScrolling="Default"  EnableShadow="true"
            HideEvent="ManualClose" ShowEvent="OnFocus" Width="175px" Height="10px" ShowDelay="0">
        </telerik:RadToolTipManager>
    </form>
    </div>
    </section>
</article>
<asp:HiddenField ID="WaterMarksCtl" runat="server" />
<XXX:Validation ID="FV1" runat="server" PostBackControls="Send" >
    <XXX:TestRequired>
        <%--<XXX:TestField ControlID="XsOfInterest" />--%>
        <XXX:TestField ControlID="FirstName" />
        <XXX:TestField ControlID="LastName" />
        <XXX:TestField ControlID="Zip" />
        <XXX:TestField ControlID="Email" />
        <XXX:TestField ControlID="PhoneNumber" />
...
 </XXX:Validation>

Using Validation controls and jquery.jqtransform not working

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0