Question

I’m using jQuery Validate and I have a form split into sections. On submission it validates and I am returning the error box method that contains all of the errors. I would like to be able to specify them as links so clicking an error would take the user to that field. Possible out of the box?

js:

$('#form').validate({
    rules: {
        firstname:   {required: true},
        lastname:    {required: true},
        email:       {required: true},
    },
    messages: {
        firstname:   {required: "Step 2: Your first name is required."},
        lastname:    {required: "Step 2: Your last name is required."},
        email:       {required: "Step 2: Your email is required."},
    },
    errorContainer: "#error_container",
    errorLabelContainer: "#error_container ul",
    wrapper: "li",
    submitHandler: function() {
            ajax('{{=URL('new_post')}}',
    }
});

And the HTML it generates looks like:

<div id="error_container">
    <ul><li><label for="firstname" generated="true" class="error_two" style="display: inline;">Step 2: Your first name is required.</label></li></ul></div>

I would like this to link back to the firstname field if at all possible. Thanks.

EDIT: I see I didn’t explain myself well enough. The HTML I want it to generate would be like:

<div id=error_container">
    <ul>
        <li>
            <a href="link_to_field">Your first name is required.</a>
        </li>
    </ul>
</div>

Where it creates clickable anchors back to the respective fields. Any way to do this? I’ve seen the “focus on error” method listed below and that certainly is a good way to do it the meantime but I would like to be able to have the user click any of the errors and go to those fields in any order they choose. It works in a multi-step format that’s why I would like this, otherwise, it would all be right there and they can just click each field normally.

Answer 1

• the quick way is to use the validate option focusInvalid, It will focus the last active or first invalid element on submit

  $('#form').validate({
     .
     focusInvalid: true,
     .
  });
  

• the long way, which should achieve what you want to do, is to make use of the showError callback in validate option

  $('#form').validate({
     .
     showErrors: function(errorMap, errorList) {
         // errorMap - the map of errors
         // errorList - array of errors
         // construct the list of error items with links that focus on the invalid elements
  
         // default behavior
         this.defaultShowErrors();
     },
     .
  }