onlyforbopi
9/22/2018 - 7:22 AM

JS.Events.Forms.InputValidation

JS.Events.Forms.InputValidation

script.js
content_copyfile_download
function validateName(field) {
  // this is the input field text content
  var name = field.value;  
  
  // get the output div
  var output = document.querySelector('#nameTyped');
  // display the value typed in the div 
  output.innerHTML = "Valid name: " + name;
  
  // You can do validation here, set the input field to
  // invalid is the name contains forbidden characters
  // or is too short
  // for example, let's forbid names with length < 5 chars
  if(name.length < 5) {
    output.innerHTML = "This name is too short (at least 5 chars)";
  }
}
js-events-forms-inputvalidation.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Events.Forms.InputValidation

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Simple input field validation</title>
</head>
<body>
  <h1>Simple input field validation using the 'input' event</h1>
  <p>Just type a name in the input field and see what happens!</p>
<label>
  <span>Name (required):</span>
  <input type="text" 
         name="nom" 
         maxlength="32" 
         required
         oninput = "validateName(this)">
</label>
  <p>
  <span id="nameTyped"></span>
</p>  
</body>
</html>