Response title
This is preview!
Move this topic
Where can I find instructions on using jQuery validation with asp.net formviews and gridviews?
in Getting Started
•
8 years ago
Where can I find instructions on using jQuery validation with asp.net formviews and gridviews?
I've been hunting around the physical bookstores and Google searches and have not been able to find anything relevant.
All the instructions I have been able to find assume that I'm working with simple tables, and not formviews and gridviews, which are a different beast entirely.
I've been using asp.net server side validation, but I kept reading about how if I used jQuery validation, I'd never go back. That would be great, if I could find instruction on how to get started.
Thank you
Replies(11)
It would depend on what a formview and gridview are rendered to the browser as. Can you post the generated markup that gets sent to the browser?
I will say, I've heard a lot of people say that it is sometimes very difficult to get jQuery to work correctly with .Net sites because of the way somethings are sent to the browser. You may be better off going to a .Net forum where they may have more experience with the specific issues you're facing.
Dave
Dave
Leave a comment on dsvick's reply
That's what I'll do next: look at the .net groups. Not usually a good experience for reasons I won't go into here.
I'm guessing that the folks using jQuery in this formula are more php folks? Or as least not .net people?
Leave a comment on henry.wyckoff's reply
The .Net sites are a frustrating experience: nothing definite.
I decided to take a different approach: trial and error, starting with a very simple hello world page and translating ASP.NET names into the rendered HTML names.
| Object | ASP.NET ID | HTML | Type | HTML ID | |
| Formview | fvAdd | table | fvAdd | ||
| Textbox | txSite_i | input | text | txtSite_i | |
| Checkbox | cbActive_i | input | checkbox | cbActive_i | |
| Linkbutton | InsertButton | a | InsertButton | ||
| Linkbutton | InsertCancelButton | a | InsertCancelButton |
I took out the "CommandName" property on the Insert and Cancel link buttons, making them:
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" Text="Insert" />
<asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" Text="Cancel" />
So now the trick is to tell the link buttons to do what they were intended to do if the table passes validation.
I'm not impressed yet.
Leave a comment on henry.wyckoff's reply
It isn't so much that the people here use one language or another to do their server side programming (heck, I'm still working in classic ASP) it is more a question of what the markup looks like when it is sent to the browser. You posted the server side code for a linkButton, but jQuery doesn't know a link button from a goldfish 
The question is what does a linkButton look like when it is sent to the browser? that's what jQuery deals with.
The question is what does a linkButton look like when it is sent to the browser? that's what jQuery deals with.With all that being said, .Net is it's own special beast because it is a framework that tries to control everything it does things to the entire site that affect how other things work. That's why a .Net specific group may be better able to help you.
In the meantime though, can you post the actual markup for a linkButton, just view the source of the web page and copy it from there. I'm sure we can help get that part working.
Dave
Leave a comment on dsvick's reply
If I read you right, it's the HTML source code as perceived by the client browser you'd like to see.
I started off from scratch, with the formview and sqldatasource without any attempt at validation yet. It is interesting to see what it actually looks like once it hits the browser.
This shows the "off the shelf" state of the page before I try anything. Let's see if I get an "exceeded length" error this time.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> </title> <style type="text/css"> h1 { font-size:larger; } h1, h2, h3 { font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; } .Formview_Border { border: thin solid #808000; } </style> </head> <body> <h1>Test Jquery Formview Validation</h1> <form method="post" action="Test2.aspx" id="form1"> <div class="aspNetHidden"> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="l+nwVkDm+bdoz58RUlKFff6f09rmaXsRVGz5eboqsMK5kkL+GWdnrHQwfdjiLIryhvCOLeTelhhEAjJm3GWDjdhK4Ne6NGbhM8/2ZpGUFQ5c75gogbLLwpZQ5YYYSDDckbWO4cCrLnlQRKm28FhxrXn0rsVXD460ZGDPhaqyPwSq39cj4881cE1dvL1iG0ogD2XnrlBMYZ4F81r/aoQe2W3gMNke6ptQ7Miinn3anyXrTuvfE1QtHBXNqzOXebTINGtw4X7KEz/Fy2EcRCVtJ7G8esyNYdfsMXkSFUyprLgCVrpPDnrfHPsEKHymGgXeDDtkEdTsHCdyFcMvfytrEA==" /> </div> <script type="text/javascript"> //<![CDATA[ var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script> <script src="/WebResource.axd?d=aG_YbECBdL214aFy5otpoQS5_i0I_QvEVl9IihMmHVR8I0ulj7R-0Nawcvh0eTHcjN8GbGwabwfyiqALb_5n_7osMzCffAShCAFpJbyXpuo1&t=635307087448997306" type="text/javascript"></script> <div class="aspNetHidden"> <input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" /> <input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" /> <input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" /> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="IWdnBTUN6OYAh3sTJ7cAQSEdUqpB7HfyGcLbEePNMxl3fGg5lgzQWku+nGE24ALijYEwGiVIZj18TtCB89zU2a+vuu2wP3U6A5hBGuX9vOJY9FIdx3CHftT+7WL8tZfJLxSXv2qkJFpvTByTR8EACmGK35jUUPbhosU3xGNjLnC2YA/ovlAU/+8NoHHFBZ5YMx2t1637+Pv0Vz6pyR9uVA==" /> </div> <table class="Formview_Border" cellspacing="0" id="fvAdd" style="border-collapse:collapse;"> <tr> <td colspan="2"> Category: <input name="fvAdd$txtCategory_i" type="text" id="txtCategory_i" /> <br /> Active: <input id="cbActive_i" type="checkbox" name="fvAdd$cbActive_i" /> <br /> <a id="InsertButton" href="javascript:__doPostBack('fvAdd$InsertButton','')">Insert</a> <a id="InsertCancelButton" href="javascript:__doPostBack('fvAdd$InsertCancelButton','')">Cancel</a> </td> </tr> </table> <div> </div> <script type="text/javascript"> //<![CDATA[ theForm.oldSubmit = theForm.submit; theForm.submit = WebForm_SaveScrollPositionSubmit; theForm.oldOnSubmit = theForm.onsubmit; theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit; //]]> </script> </form> </body> </html>
Leave a comment on henry.wyckoff's reply
Reading about the jquery validator itself from other sources, I see that it is designed to validate forms, whereas my formview is a table.
Because I do like the convenience of using the sqldatasource, formview, and gridview, it looks like I'll be sticking with the server-side validation methods for the moment.
The only item which I found works very well is a jQuery measurement of characters typed in a multi-line textbox and restricts the user from typing more than the allowed characters -- which the asp.net validators still don't do off-the-shelf.
Leave a comment on henry.wyckoff's reply
What's this, then?Reading about the jquery validator itself from other sources, I see that it is designed to validateforms, whereas my formview is a table
<form method="post" action="Test2.aspx" id="form1">
There's a table inside the form, but I wouldn't expect that to interfere with validation.
Leave a comment on watusiware's reply
I tried validating using the form name and using the formview name. In neither case did the function trigger.
Believe me, I've spent two days trying every possible combination, following every example I could find. Didn't work.
I've given up this line of inquiry. If someone can show me a proven example of using jQuery validation for a formview, I'd love to see it. I haven't been able to find it through Google searches or in the bookstores.
Leave a comment on henry.wyckoff's reply
I don't know what you mean by "using the form name" and "using the formview name". Explain. Show some code. It's hard to help with specific problems when all we get is abstract descriptions of what the developer tried, without any code.I tried validating using the form name and using the formview name. In neither case did the function trigger.
Validate will work with any jQuery selector. First you find the form you want to validate. You can use any jQuery selector you want - ID, CSS class, name, attribute, some combination, etc. etc. etc. You then apply the .validate() function to the jQuery object (NOT the element itself.)
This is how (almost) ALL jQuery plugins work!
$('#myform').validate();
Substitute any selector you'd like for #myform. Whatever it takes to locate your form in the DOM.
The first thing to learn about jQuery is how to use selectors. Skip this, and you will be lost. Examples are almost always written using IDs, but it is understood that you know how to use selectors and realize that you can substitute any selector that will find the element(s) you are applying the function to.
You can play with this in your browser's Javascript console, and I'd encourage you to do so. Just type-in a call to jQuery with a selector, and apply any function you'd like to check-out.
Leave a comment on watusiware's reply
Already tried it. Didn't work.
Have you tried to validate a formview yourself? If so, can you post it? I'd really love to see what I missed.
Leave a comment on henry.wyckoff's reply
I finally got it to work, and have the code in attached text documents.
I posted comments of what I did in this code. I also posted the
browser source code.
For anyone who does know asp.net and is required to use jQuery to
validate a formview, this is a working example that can start the conversation.
Attachments
Leave a comment on henry.wyckoff's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to henry.wyckoff's discussion