StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POValidating sections of a form
primarykey
Id
18402159
data
AcceptedAnswerId
18407211
AnswerCount
3
ClosedDate
CommentCount
8
CommunityOwnedDate
CreationDate
2013-08-23T11:50:27.760
FavoriteCount
5
LastActivityDate
2016-02-07T02:39:43.103
LastEditDate
2013-08-23T15:09:49.873
LastEditorUserId
799774
OwnerUserId
799774
ParentId
0
PostTypeId
1
Score
5
ViewCount
5679
LastEditorDisplayName
text
Body
<p>I've broken my form up into divs and using Next buttons to shop and hide those sections. I am also using jQuery Validation Plugin to do all the validation for me.</p> <p>What I need to know is how to validate section by section. So this is what I have</p> <ol> <li>Personal Information</li> <li>Address details</li> <li>Project Information</li> <li>Terms and conditions</li> </ol> <p>2,3,and 4 are hidden by default to make the form less daunting.</p> <p>Clicking on the next button of Personal Information will hide this div and show the Address Details and so on.</p> <p>The very last screen has the submit form button which then would validate the entire form normally but I need to validate each section before the user moves on.</p> <p>Here's what I thought should have worked:</p> <p><strong>CSS</strong></p> <pre><code> .project-address {display:none;} </code></pre> <p><strong>HTML</strong></p> <pre><code> <form class="wpcf7"> <div class="project-details"> <h2>Project details</h2> <label>Project name: </label><input type="text" class="reg-project-name" size="40" value="" name="projectName"> <div class="back-next"><span class="reg-next-button">Next</span></div> </div> <div class="project-address"> <h2>Project address</h2> <label>Project address:</label><input type="text" class="reg-project-address" size="40" value="" name="projectAddress"> <div class="back-next"><span class="reg-next-button">Next</span></div> </div> </form> </code></pre> <p><strong>JQUERY</strong></p> <pre><code> //clicking the next button hides this section and shows the next section jQuery('.project-details .reg-next-button').click(function() { // jQuery(".project-details").slideUp(); // jQuery('.project-address').slideDown(); jQuery('.reg-project-name').validate({ debug: true, rules: { projectName: "required" }, messages: { projectName: "Please give your project a name", } }); }); </code></pre> <p><strong>EDIT: Have tried to validate one element like this.</strong></p> <pre><code> jQuery('.project-details .reg-next-button').click(function() { // jQuery(".project-details").slideUp(); // jQuery('.project-funding').slideDown(); var validator = jQuery( ".wpcf7-form" ).validate(); validator.element( ".reg-project-name" ); }); </code></pre> <p><strong>EDIT:</strong> If I click on the Next button, I need the form elements to be validated in that div before moving on which is not happening. i.e the form elements are not being validated..</p> <p>Any thoughts? Many thanks.</p>
Tags
<jquery><forms><validation><jquery-validate>
Title
Validating sections of a form
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USSixfootJames
UserOwnerUserId
1. USSixfootJames
plurals
PostLinksPostIdRelatedPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostLinksRelatedPostIdPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.