angelikatyborska/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
<style>
  body { padding: 10px; }
</style>
</head>
<body>
  <form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />

    <label for="phone">Phone Number</label>
    <input type="tel" id="phone" name="phone" required pattern="$\+[0-9]" />

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

  <script>
    const nameInput = document.querySelector('input[name="name"]');
    const emailInput = document.querySelector('input[name="email"]');
    const phoneInput = document.querySelector('input[name="phone"]');
    const allInputs = [nameInput, emailInput, phoneInput];


    nameInput.addEventListener('invalid', function (event) {
      if (event.target.validity.valueMissing) {
        event.target.setCustomValidity('Please tell us how we should address you.');
      }
    })

    emailInput.addEventListener('invalid', function (event) {
      if (event.target.validity.valueMissing) {
        event.target.setCustomValidity('We need your email address to send you an order conformation.');
      }
    })

    phoneInput.addEventListener('invalid', function (event) {
      if (event.target.validity.valueMissing) {
        event.target.setCustomValidity('We need your phone number so that we can pass it on to the delivery company.');
      }

      if (event.target.validity.patternMismatch) {
        event.target.setCustomValidity('Your phone number should start with a + and a country code.');
      }
    })

    allInputs.forEach(function (input) {
      input.addEventListener('change', function (event) {
        event.target.setCustomValidity('');
      })
    })
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Form Validation</title>
	<style>
	body { padding: 10px; }
	</style>
	</head>
	<body>
	<form>
	<label for="name">Name</label>
	<input type="text" id="name" name="name" required />

	<label for="email">Email</label>
	<input type="email" id="email" name="email" required />

	<label for="phone">Phone Number</label>
	<input type="tel" id="phone" name="phone" required pattern="$\+[0-9]" />

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

	<script>
	const nameInput = document.querySelector('input[name="name"]');
	const emailInput = document.querySelector('input[name="email"]');
	const phoneInput = document.querySelector('input[name="phone"]');
	const allInputs = [nameInput, emailInput, phoneInput];


	nameInput.addEventListener('invalid', function (event) {
	if (event.target.validity.valueMissing) {
	event.target.setCustomValidity('Please tell us how we should address you.');
	}
	})

	emailInput.addEventListener('invalid', function (event) {
	if (event.target.validity.valueMissing) {
	event.target.setCustomValidity('We need your email address to send you an order conformation.');
	}
	})

	phoneInput.addEventListener('invalid', function (event) {
	if (event.target.validity.valueMissing) {
	event.target.setCustomValidity('We need your phone number so that we can pass it on to the delivery company.');
	}

	if (event.target.validity.patternMismatch) {
	event.target.setCustomValidity('Your phone number should start with a + and a country code.');
	}
	})

	allInputs.forEach(function (input) {
	input.addEventListener('change', function (event) {
	event.target.setCustomValidity('');
	})
	})
	</script>
	</body>
	</html>