Validating sections of a form

Question

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.

W

Answer 1

You can use the valid method on a selection of elements that you wish to validate.

Working Example:

// First, set up validator
$('#projectForm').validate({
  debug: true,
  rules: {
    projectName: "required"
  },
  messages: {
    projectName: "Please give your project a name",
  }
});

//clicking the next button hides the current section and shows the next section
$('.project-details .reg-next-button').click(function() {
    // Get the form that this button lives in
    var form = $(this).closest("form");
    // Get the validator object for the form
    var validator = form.data("validator");
    // Get the section that we're currently validating.  May need to modify this depending on the structure of your DOM
    var section = $(this).closest("div");
    // Get all controls (input, textarea, select, etc) in the section
    var fields = section.find(":input");
    if (fields.valid()){
      console.log("Valid!");
      // Hide this section...
      section.toggle();
      // And show the next section
      section.next().toggle();
    }
});

.project-address {
  display:none;
}

  

    
Project details
    Project name: 
    
    

    Next
  
  

    
Project address
    Project address:
    

    Next
  

See this Codepen: http://codepen.io/alexweissman/pen/Wragog