Search code examples
jqueryvalidationdrupal-7

jQuery Validation message required overwrite does not work as expected

There are plenty of tutorials out there like here and official jQuery Validate docs. But they're not working anymore to overwrite the required messages.

So this one does not overwrite the required message. But anyway all tutorials out there say it should work in that way:

$('#my-form').validate({
        rules: {
          mail: "required",
        },
        messages: {
          mail: {
            required: "Give an email in!",
          },
        }
  });

If I do it in this way:

$('#my-form').validate({
        rules: {
          mail: "required",
        },
        messages: {
          mail: "Give an email in!",
        }
      });

it works. And it really overwrite the usual "Field Email is required". But now I'm not able to set any other message. So this is not useful!

So how is it possible to overwrite the required text right now?

I'm using Drupal 7.51 with Clientside Validation 7.x-1.42 and jQuery 1.10.2.

Other messages are correctly owerwritten anyway

So when I take the email instead of required, it correctly owerwrites it. So it's something with the required message I would assume? What are your ideas about this:

   $('#my-form').validate({
            rules: {
              mail: "email",
            },
            messages: {
              mail: {
                email: "Invalid email",
          },
            }
   });

Also setting messages globally works, except on required

Works for email, but not on required:

jQuery.extend(jQuery.validator.messages, {
  required: "required...",
  email: "email...",
});

Possible workarounds (but no solution)

Hint: I had the issue that other forms were not working properly. But this was just an issue of setting the #required property in PHP. After setting it to all the different user-register forms, they were working as well.

Solution

  • You can always do the following:

    (function(Drupal, $) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function() {
      $(document).bind('clientsideValidationInitialized', function() {
        var validator = Drupal.myClientsideValidation.validators['my-form'];
        if (typeof validator.settings.messages.mail === 'undefined') {
          validator.settings.messages.mail = {};
        }
        validator.settings.messages.mail.required = 'My custom message for the "required" rule for the input with name "mail".';
      });
    }
  };
})(Drupal, jQuery);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.js"></script>
<form id="my-form">
  <input name="mail" type="mail" required="required" />
  <input type="submit" value="Submit" />
</form>

    Which should work just fine.

    EDIT: I updated the script to work with the Clientside Validation Drupal module. It fires the clientsideValidationInitialized event when it has finished doing all its processing.