validation - Simple way to alert error messages in Javascript

admin管理员组

文章数量:1125612

I would like to issue an alerted message when a Wordpress content is blank. For example, this is part of the codes:

    if(content === '') {      
       alert('Please write description of your post.');       
    }

The above codes work well when the WP content is blank for both Visual and HTML Modes of Classic Editor.

The problemm is alert() is browser-related function: it displays a checkbox along with error message above like:

"Don't allow www.mywebsite to prompt you again."

in Firefox, but not in Opera (not tested other browsers yet). If users enable that checkbox, no more error messages will be displayed in the future.

This is not really good because that error message is important for users to complete the WP content before they can publish their posts.

I have also tried the followings:

    if(content === '') {      
       $("Please write description of your post.").dialog();       
    }

It is quite good as it removes the above checkbox from the error box.

But it has an issue for a long form because it does not show where the field needs filling out, and if I use function focus(), the error box stays where it is while the cursor is moved away to an intended field - then that error box disappears from being seen. It means the cursor move before closing error box with dialog().

Another issue with dialog() is it allows users to type while it is still displaying error box. Alert() wont let users do that before error box is closed.

What is a simple way to display error messages without having issues mentioned above?

Any help is very appreciated.

I would like to issue an alerted message when a Wordpress content is blank. For example, this is part of the codes:

    if(content === '') {      
       alert('Please write description of your post.');       
    }

The above codes work well when the WP content is blank for both Visual and HTML Modes of Classic Editor.

The problemm is alert() is browser-related function: it displays a checkbox along with error message above like:

"Don't allow www.mywebsite.com to prompt you again."

in Firefox, but not in Opera (not tested other browsers yet). If users enable that checkbox, no more error messages will be displayed in the future.

This is not really good because that error message is important for users to complete the WP content before they can publish their posts.

I have also tried the followings:

    if(content === '') {      
       $("Please write description of your post.").dialog();       
    }

It is quite good as it removes the above checkbox from the error box.

But it has an issue for a long form because it does not show where the field needs filling out, and if I use function focus(), the error box stays where it is while the cursor is moved away to an intended field - then that error box disappears from being seen. It means the cursor move before closing error box with dialog().

Another issue with dialog() is it allows users to type while it is still displaying error box. Alert() wont let users do that before error box is closed.

What is a simple way to display error messages without having issues mentioned above?

Any help is very appreciated.

• validation

Share Improve this question edited Jan 27, 2024 at 17:57 daro2013 asked Jan 27, 2024 at 17:47 daro2013daro2013 2511 silver badge66 bronze badges 3

• HI, I posted an answer to a similar question here: wordpress.stackexchange.com/questions/422095/… – Gerald T - WordPress Buddha Commented Jan 27, 2024 at 18:38
• This is really a JavaScript question, not anything specific to WordPress. That being said, have you tried window.confirm instead of window.alert? – Jacob Peattie Commented Jan 28, 2024 at 2:14
• Thanks. I ll try window.confirm, and ll give a result soon – daro2013 Commented Feb 1, 2024 at 14:56

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Thank you Jacob Peattie for suggesting. It is very simple to use confirm() to replace alert() although confirm() has two options for users to select: OK and Cancel.

When users click OK or Cancel button, I use function focus() to direct users where to correct that empty Content. Here are my working sample codes:

   if(content === '') {      
       confirm('Please write description of your post.'); 
       tinymce.activeEditor.focus(); // for Visual Mode of WP Classic Editor
       $('#content').focus();           // for HTML Mode of WP Classic Editor
    }

Many thanks

本文标签： validationSimple way to alert error messages in Javascript