ASP.NET – How to Integrate jQuery Validation into ASP.NET Web Form

asp.netjquery

I have a simple donation form using Jquery Validation and Bootstrap

You can see the simple form here : JSFiddle

Currently the form is just simple HTML, javascript, and css. It validates correctly and I'm happy with the usability. What I want to achieve is to move this to an ASP .Net project using web forms. But I have a few questions regarding how to do this.

  1. My form currently uses a form tag. How should I handle this since there is a default 'form' in my aspx page?

Can

<form id="signupForm" runat="server">

Replace

<form id="signupForm" method="post" class="form-horizontal" action="">
  1. How does the button call the validate method in my javascript now that my button isn't wrapped in a form tag without an action? In my fiddle, I simply included a button with a button type="submit" and it worked. Will I have to include an onclick event to call the validation?

3. Why am I seeing different results on a web forms page then I am in a simple html page. For example, my form elements are nicely spaced apart in my fiddle example. But when I convert my project to a web forms project, I have spacing issues.

Imgur Photo

  1. Is there anything else I should consider while moving this project from simple html/javascript/css into an asp .net project? Thank you for your time!

Best Answer

The reason all server controls are placed inside tag is to allow the WebForms engine to recognize them, load their values & save their values from/to the ViewState. Almost all infrastructure of control management in WebForms is based on the idea that a tag contains everything you access from the code-behind.
1- My form currently uses a form tag. How should I handle this since there is a default 'form' in my aspx page? you can depend on this form but you need to specify a client side action on the submit button, if this form will save data into database "highly likely" then you will need to have two actions
Answer:
A) On Click action "Code that will get executed on server side"
B) OnClientClick to validate the code using Jquery

2- How does the button call the validate method in my javascript now that my button isn't wrapped in a form tag without an action? In my fiddle, I simply included a button with a button type="submit" and it worked. Will I have to include an onclick event to call the validation?
Answer:
It depends on how validation is wrapped/working, if you are having a simple JS validation method, then you will need to call this method, if its being called using Plugin by class name, then you will need to specify the same class name attached to this button
3. Why am I seeing different results on a web forms page then I am in a simple html page. For example, my form elements are nicely spaced apart in my fiddle example. But when I convert my project to a web forms project, I have spacing issues.

Answer:

the way page get rendered on aspx is a little bit different than the way it get rendred in HTML, as some server side control for example get rendered as SPAN, best way to recognize the difference is to use a 3rd party tool like FireBug to inspect both pages and compare the HTML of each separately to recognize the difference.


4- Is there anything else I should consider while moving this project from simple html/javascript/css into an asp .net project? Thank you for your time!

Answer:
A) Build empty project, use the same structure used in HTML (Folder Structure) other wise you will need to update links/ref to images/css accordingly
B) if you will use a master page, then you need to include some JS files in master page and some others on the default page.
C) if you are going to use the same form in multiple locations, always use aspx web controls.
That's the basic stuff, please let me know if you need any other help by providing more code samples

Related Topic