DEV Community

Reishi Mitani
Reishi Mitani

Posted on

1

Modifying Input Error Messages with jQuery

I recently needed a way to change the language and the content of the error messages in my web app using jQuery.

Suppose an image is required to upload in a form.
The default message would be like the one below, Please select a file.

Alt Text

However, you might not like the content of the message or the language of the message. Add the following jQuery code to your file.

Make sure to change the id of the file (which in this case is myform) to your own form id.

$('#myform input[type=file]').on('change invalid', function() {
    var textfield = $(this).get(0);

    // 'setCustomValidity not only sets the message, but also marks
    // the field as invalid. In order to see whether the field really is
    // invalid, we have to remove the message first
    textfield.setCustomValidity('');

    if (!textfield.validity.valid) {
        textfield.setCustomValidity('画像は添付してね! At least one image is required for this form!');  
    }
});
Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay