SettingsForm.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<form id="settings" class="d-grid gap-2" onsubmit="event.preventDefault(); google.script.run.processSettingsForm(this)" method="POST">

  <div class="form-floating">
    <input type="text" class="form-control" id="SPOTIFY_CLIENT_ID" name="SPOTIFY_CLIENT_ID" placeholder="SPOTIFY_CLIENT_ID" value="<?= SPOTIFY_CLIENT_ID ?>">
    <label for="SPOTIFY_CLIENT_ID">SPOTIFY_CLIENT_ID</label>
  </div>

  <div class="form-floating">
    <input type="text" class="form-control" id="SPOTIFY_CLIENT_SECRET" name="SPOTIFY_CLIENT_SECRET" placeholder="SPOTIFY_CLIENT_SECRET" value="<?= SPOTIFY_CLIENT_SECRET ?>">
    <label for="SPOTIFY_CLIENT_SECRET">SPOTIFY_CLIENT_SECRET</label>
  </div>

  <div class="form-floating">
    <input type="text" class="form-control" id="SPOTIFY_SAVED_SONGS_PLAYLIST_ID" name="SPOTIFY_SAVED_SONGS_PLAYLIST_ID" placeholder="SPOTIFY_SAVED_SONGS_PLAYLIST_ID" value="<?= SPOTIFY_SAVED_SONGS_PLAYLIST_ID ?>">
    <label for="SPOTIFY_SAVED_SONGS_PLAYLIST_ID">SPOTIFY_SAVED_SONGS_PLAYLIST_ID</label>
  </div>

  <div class="form-floating">
    <input type="text" class="form-control" id="SPOTIFY_SAVED_ARCHIVE_PLAYLIST_ID" name="SPOTIFY_SAVED_ARCHIVE_PLAYLIST_ID" placeholder="SPOTIFY_SAVED_ARCHIVE_PLAYLIST_ID" value="<?= SPOTIFY_SAVED_ARCHIVE_PLAYLIST_ID ?>">
    <label for="SPOTIFY_SAVED_ARCHIVE_PLAYLIST_ID">SPOTIFY_SAVED_ARCHIVE_PLAYLIST_ID</label>
  </div>

  <div class="form-floating">
    <input type="text" class="form-control" id="SPOTIFY_RELEASE_RADAR_PLAYLIST_ID" name="SPOTIFY_RELEASE_RADAR_PLAYLIST_ID" placeholder="SPOTIFY_RELEASE_RADAR_PLAYLIST_ID" value="<?= SPOTIFY_RELEASE_RADAR_PLAYLIST_ID ?>">
    <label for="SPOTIFY_RELEASE_RADAR_PLAYLIST_ID">SPOTIFY_RELEASE_RADAR_PLAYLIST_ID</label>
  </div>

  <div class="form-floating">
    <input type="text" class="form-control" id="SPOTIFY_DISCOVER_WEEKLY_PLAYLIST_ID" name="SPOTIFY_DISCOVER_WEEKLY_PLAYLIST_ID" placeholder="SPOTIFY_DISCOVER_WEEKLY_PLAYLIST_ID" value="<?= SPOTIFY_DISCOVER_WEEKLY_PLAYLIST_ID ?>">
    <label for="SPOTIFY_DISCOVER_WEEKLY_PLAYLIST_ID">SPOTIFY_DISCOVER_WEEKLY_PLAYLIST_ID</label>
  </div>

  <div class="form-floating">
    <input type="text" class="form-control" id="SPOTIFY_RELEASE_RADAR_BACKUP_PLAYLIST_ID" name="SPOTIFY_RELEASE_RADAR_BACKUP_PLAYLIST_ID" placeholder="SPOTIFY_RELEASE_RADAR_BACKUP_PLAYLIST_ID" value="<?= SPOTIFY_RELEASE_RADAR_BACKUP_PLAYLIST_ID ?>">
    <label for="SPOTIFY_RELEASE_RADAR_BACKUP_PLAYLIST_ID">SPOTIFY_RELEASE_RADAR_BACKUP_PLAYLIST_ID</label>
  </div>

  <div class="form-floating">
    <input type="text" class="form-control" id="SPOTIFY_DISCOVER_WEEKLY_BACKUP_PLAYLIST_ID" name="SPOTIFY_DISCOVER_WEEKLY_BACKUP_PLAYLIST_ID" placeholder="SPOTIFY_DISCOVER_WEEKLY_BACKUP_PLAYLIST_ID" value="<?= SPOTIFY_DISCOVER_WEEKLY_BACKUP_PLAYLIST_ID ?>">
    <label for="SPOTIFY_DISCOVER_WEEKLY_BACKUP_PLAYLIST_ID">SPOTIFY_DISCOVER_WEEKLY_BACKUP_PLAYLIST_ID</label>
  </div>

  <button class="btn btn-primary" id="submit" type="submit">Save</button>
</form>

<script	src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

<script type="application/javascript">
  $(document).ready(function() {
    $('input').change(validate);

    validate();
  });

  function validate() {
    let errors = false;

    $('input').each(function() {
      const me = $(this);

      if (!me.val()) {
        me.addClass('is-invalid');
        errors = true;
      }
      else {
        me.removeClass('is-invalid');
      }
    });

    $('#submit').prop('disabled', errors);
  }
</script>