Get started with shoestring CDN

(MIT OR GPL-2.0) licensed

Shoestring is a minimalist library for building server-rendered Single Page Applications.

Tags:
  • lightweight
  • DOM-ready
  • HTML

Stable version

Copied!

How to start using shoestring CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with shoestring CDN - cdnhub.io</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.cdnhub.io/shoestring/2.0.1/shoestring.min.js"></script>
</head>
<body>
  <form id="myForm">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <span id="emailError"></span>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    <span id="passwordError"></span>

    <button type="submit">Submit</button>
  </form>

  <script>
    const form = document.querySelector('#myForm');

    form.addEventListener('submit', (event) => {
      event.preventDefault();

      Stripe.setErrorMessages('name', 'value');

      const emailInput = document.querySelector('#email');
      const emailError = document.querySelector('#emailError');
      const passwordInput = document.querySelector('#password');
      const passwordError = document.querySelector('#passwordError');

      form.email.validate({
        type: 'email',
        required: true,
        errorMessage: 'Please enter a valid email address.',
        onError: (err) => {
          emailError.textContent = err;
        },
        onSuccess: () => {
          emailError.textContent = '';
        }
      });

      form.password.validate({
        type: 'password',
        required: true,
        errorMessage: 'Please enter a password.',
        onError: (err) => {
          passwordError.textContent = err;
        },
        onSuccess: () => {
          passwordError.textContent = '';
        }
      });

      if (form.isValid()) {
        // Form is valid, submit the form using AJAX or other methods
        console.log('Form is valid, submitting...');
      }
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions