Stop jQuery Validate from duplicating error messages

Stop jQuery Validate from duplicating error messages

We are using jQuery Validate from https://jqueryvalidation.org/ to do reactive validation.

I've got server code that is creating error messages exactly as jquery.validate.js does
eg:

  1. <p id="email.errors" class="mwf-error">The e-mail address you entered is not valid.</p>

but when the user interacts with the incorrect input without making it valid again jquery.validate.js just adds it's own error message to the markup instead of reusing the existing element. This leads to markup like the below (please note that this isn't valid HTML since two elements have the same id)


  1. <div class="mwf-input">
  2.       <input aria-invalid="true" aria-describedby="email.errors" id="mwf3_23870" name="email" class="mwf-text  mwf-error" data-mwf-validators="[{&quot;name&quot;:&quot;email&quot;,&quot;properties&quot;:{}}]" placeholder="your@email.here" data-mwf-id="mwf3_23870" value="christinead" type="text">
  3.       <p class="mwf-error" id="email.errors">Please enter a valid email address.</p>
  4.       <p id="email.errors" class="mwf-error">The e-mail address you entered is not valid.</p>
  5. </div>
Any ideas on how I could remedy this?

Our validate init looks like this:

  1. $forms.validate({
    onsubmit: false,
    onkeyup: false,
    onfocusout: function (element) {
    this.element(element);
    },
    focusInvalid: false,
    errorElement: "p",
    errorClass: "mwf-error",
    errorIdSuffix: ".errors",
    success: handleSuccess
    });