Changeset 11915

Timestamp:

06/15/2022 05:04:39 AM (3 years ago)

Author:

dd32

Message:

Login: Provide some feedback that the URL is not valid.

A high number of accounts are created with invalid URLs which causes confusion and delays some registrations.

See #6345.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login

Files:

• js/registration.js (modified) (1 diff)
• partials/register-profilefields.php (modified) (1 diff)
• stylesheets/login.css (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/js/registration.js

@@ -67 +67 @@
             });
 
+            // Apply the input validation after initial blur, to avoid showing as invalid during initial edits.
+            $loginForm.on( 'blur', 'input[data-pattern-after-blur]', function() {
+                var $this = $( this );
+                if ( $this.val() ) {
+                    $this.prop( 'pattern', $this.data( 'pattern-after-blur' ) );
+                    $this.data( 'pattern-after-blur', false );
+                }
+            } );
+
             // If the form has data in it upon load, immediately trigger the validation.
             if ( $loginForm.find('#user_login').val() ) {

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/partials/register-profilefields.php

@@ -22 +22 @@
 <p class="login-website">
     <label for="user_website"><?php _e( 'Website', 'wporg' ); ?></label>
-    <input type="text" name="user_fields[url]" id="user_url" class="input" value="<?php echo esc_attr( $fields['url'] ?? '' ); ?>" size="20" placeholder="https://" />
+    <input type="text" name="user_fields[url]" id="user_url" class="input" value="<?php echo esc_attr( $fields['url'] ?? '' ); ?>" size="20" placeholder="https://" data-pattern-after-blur="(https?://)?([a-zA-Z0-9-]+\.\S+)?" />
+    <span class="invalid-message"><?php _e( 'That URL appears to be invalid.', 'wporg' ); ?></span>
 </p>
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/stylesheets/login.css

@@ -366 +366 @@
 }
 
-body.login form input.error {
+body.login form span.invalid-message {
+    display: none;
+}
+body.login form input.input:invalid + span.invalid-message {
+    display: block;
+}
+
+body.login form input.error,
+body.login form input:invalid {
     background-color: #fbeaea;
     border: 2px solid #dc3232;