0

I am using the jQuery Validate plugin to validate multiple fields in a table with the same name. Using this answer to another question, the validator nicely validates all the fields, with one issue: the error message stays attached to the first invalid field.

Here is the error placement on the .validate function rules.

        errorPlacement: function (error, element) {
            error.insertAfter(element.parent());
        },

As this codepen I wrote demonstrates, only the first input field with the same name gets an error message

enter image description here

and after the field is filled in, the message remains next to that input field while the error is in another field

enter image description here

even if all input errors are fixed and then the user makes another error, the message stays on that box.

enter image description here

enter image description here

How can I get the validator to put a message on each error, as in the image below?

enter image description here

Sparky
  • 98,165
  • 25
  • 199
  • 285
Kuai Le
  • 162
  • 11
  • You absolutely cannot use the same `name` on more than one text input with this plugin. The problem you describe is exactly what happens when you do. Only one message on first instance. This has been covered many times here on the jQuery Validate tag. – Sparky Jul 10 '18 at 18:56

1 Answers1

1

Code here: Code Changes

rules: {
            'name1': {
                required: true
            },
            'name2': {
                required: true
            },
            'name3': {
                required: true
            }
        },

        // Messages for form validation
        messages: {
            'name1': {
                required: 'Please enter a value'
            },
            'name2': {
                required: 'Please enter a value'
            },
            'name3': {
                required: 'Please enter a value'
            }

The required field should be unique for each input element.

Jay Ganesan
  • 113
  • 6
  • This is a feasible solution to the codepen, but my actual project has a much larger number of input fields and manually giving each field a unique name bloats several different javascript files. The validator validates each field but doesn't change the location of the message – Kuai Le Jul 10 '18 at 16:49