Site icon Hip-Hop Website Design and Development

How to Display Error in my Cheap WordPress customizer API?

I have been trying to add error to my WordPress customizer API like this error message:

I am trying to add custom message when the user enter invalid phone number, here is my custom code:

$wp_customize->add_setting('basic-banner-callout-phonenumber', array(
        'default' => '',
        'sanitize_callback' => array( $this, 'sanitize_custom_phonenumber' ),
        'validate_callback' => 'valide_custom_phonenumber'
    
    ));
    $wp_customize->add_control(new WP_Customize_Control($wp_customize, 'basic-banner-callout-control-text', array(
        'label' => 'PhoneNumber',
        'section' => 'basic-banner-callout-section',
        'settings' => 'basic-banner-callout-phonenumber',
        'type' => 'text',
        'input_attrs' => array(
            'maxlength' => 10
        )
 public function valide_custom_phonenumber( $validity, $input) {
    $input = intval( $input );
    if ( empty( $input )) 
    {
        $validity->add( 'required', __( 'You must supply a valid phonenumber.' ) );
    } elseif ( $input ! is_numeric( $input ) ) {
        $validity->add( 'text_not_number', __( 'Please Enter Numbers Only.'));
    } elseif ( $input < 10 ) {
        $validity->add( 'number_is_missing', __( 'Please Enter full PhoneNumber.' ) );
    }
    return $validity;
}
  public function sanitize_custom_phonenumber($input)
 { 

    if(strlen($input)>6)
    {
       $input = preg_replace("/[^d]/","",$input);
       $input = preg_replace("/^1?(d{3})(d{3})(d{4})$/", "$1-$2-$3", $input);
    }
    elseif(strlen($input)>3)
    {
        $input = preg_replace("/[^d]/","",$input);
        $input = preg_replace("/^1?(d{3})(d{3})$/", "$1-$2", $input);
    }
    return filter_var($input, FILTER_SANITIZE_STRING);
}

MY Banner.JS

wp.customize( 'basic-banner-callout-phonenumber', function ( setting ) {
setting.validate = function ( value ) {
    var code, notification;
    code = 'required';
    if (value=='') {
        notification = new wp.customize.Notification( code );
        setting.notifications.add( code, notification );
    } else {
        setting.notifications.remove( code );
    }

    if ( isNaN( value ) ) {
        return value;
    }

    code = 'text_not_number';
    if (isNaN( value )  ) {
        notification = new wp.customize.Notification( code);
        setting.notifications.add( code, notification );
    } else {
        setting.notifications.remove( code );
    }

    code = 'number_is_missing';
    if (value< 10) {
        notification = new wp.customize.Notification( code);
        setting.notifications.add( code, notification );
    } else {
        setting.notifications.remove( code );
    }

    return value;
};

}
( jQuery, wp.customize ) );

How could I possible display if empty $input, "You must supply a valid phone number". For example?