Form Validation

form-validation.markdown

Form Validation

A Pen by Web Dev Simplified on CodePen.

License.

index.html

<div id="error"></div>
<form id="form" action="/" method="GET">
  <div>
    <label for="name">Name</label>
    <input id="name" name="name" type="text" required>
  </div>
  <div>
    <label for="password">Password</label>
    <input id="password" name="password" type="password">
  </div>
  <button type="submit">Submit</button>
</form>
 
      
      
     
      
      
      
      
      
      
      
      
      
      
      <!-- Side Links Only -->
      <div class="side-links">
        <a href="https://youtu.be/In0nB0ABaUk" target="_blank" class="side-link side-link-youtube">
          <i class="fab fa-youtube-square side-link-icon"></i>
          <span class="side-link-text">View Tutorial</span>
        </a>
        <a href="https://github.com/WebDevSimplified" target="_blank" class="side-link side-link-github side-link-icon">
          <i class="fab fa-github-square"></i>
          <span class="side-link-text">View GitHub</span>
        </a>
        <a href="https://twitter.com/DevSimplified" target="_blank" class="side-link side-link-twitter">
          <i class="fab fa-twitter-square side-link-icon"></i>
          <span class="side-link-text">View Twitter</span>
        </a>
      </div>

script.js

const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')

form.addEventListener('submit', (e) => {
  let messages = []
  if (name.value === '' || name.value == null) {
    messages.push('Name is required')
  }

  if (password.value.length <= 6) {
    messages.push('Password must be longer than 6 characters')
  }

  if (password.value.length >= 20) {
    messages.push('Password must be less than 20 characters')
  }

  if (password.value === 'password') {
    messages.push('Password cannot be password')
  }

  if (messages.length > 0) {
    e.preventDefault()
    errorElement.innerText = messages.join(', ')
  }
})

style.css

/* Background Styles Only */

@import url('https://fonts.googleapis.com/css?family=Raleway');

* {
    font-family: Raleway;
}

html {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #DFDFDF;
}

.side-links {
  position: absolute;
  top: 15px;
  right: 15px;
}

.side-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
  width: 180px;
  padding: 10px 0;
  border-radius: 10px;
}

.side-link-youtube {
  background-color: red;
}

.side-link-twitter {
  background-color: #1DA1F2;
}

.side-link-github {
  background-color: #6e5494;
}

.side-link-text {
  margin-left: 10px;
  font-size: 18px;
}

.side-link-icon {
  color: white;
  font-size: 30px;
}

styles

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />