Popup Validation Example

Form fields Validation. No dependencies. Pure JS/CSS

HTML

<script src="https://antonlapshin.github.io/popup-validation/validation.min.js"></script>
<link rel="stylesheet" href="https://antonlapshin.github.io/popup-validation/validation.min.css">
<script async defer src="https://buttons.github.io/buttons.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<style>
  body {
    text-align: center;
    padding: 1em;
    font-family: 'Lato', sans-serif;
    background-color: #fafafa;
  }

  * {
    box-sizing: border-box;
  }

  label {
    margin-right: 1em;
    line-height: 1.5;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select:not([type="checkbox"]):not([type="radio"]) {
    height: 30px;
    width: 100%;
    border: 1px solid #bbb;
  }

  textarea {
    width: 100%;
    height: 60px;
    border: 1px solid #bbb;
  }

  form {
    text-align: left;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    background-color: white;
    padding: 1em;
    max-width: 700px;
    min-width: 300px;
    display: inline-block;
  }

  form>div {
    padding: 1em;
  }

  .form-control {
    border-radius: 0;
  }

  button {
    margin: 1em;
  }

  #customClassValidation,
  #manualValidation {
    height: 30px;
    width: 100%;
    border: 1px solid #bbb;
    background-color: white;
  }

</style>

<p>Pure JavaScript popup validation. Read <a href="https://github.com/AntonLapshin/popup-validation#popup-validation">docs</a></p>
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/AntonLapshin/popup-validation" data-icon="octicon-star" data-show-count="true" aria-label="Star AntonLapshin/popup-validation on GitHub">Star</a>

<h2>
  Popup Validation Example
</h2>

<form class="form-panel">
  <div>
    <label for="title">Title:</label>
    <select autofocus class="validate form-control" data-validate="required">
      <option selected></option>
     ...

SCSS

body {
    text-align: center;
    padding: 1em;
    font-family: 'Lato', sans-serif;
    background-color: #fafafa;

    * {
      box-sizing: border-box;
    }

    label {
      margin-right: 1em;
    }

    input, select {
      &:not([type="checkbox"]):not([type="radio"]){
        height: 30px;
        width: 100%;
        border: 1px solid #bbb;
      }
    }
    
    textarea {
      width: 100%;
      height: 60px;
      border: 1px solid #bbb;
    }
    
    form {
      text-align: left;
      box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);   
      background-color: white;
      padding: 1em;
      max-width: 600px;
      min-width: 400px;
      display: inline-block;
      
      > div {
        padding: 1em;
      }
      
      label {
        line-height: 1.5;
      }
    }

    .form-control {
      border-radius: 0;
    }
    
    button {
      margin: 1em;
    }
    
    #customClassValidation {
      height: 30px;
      width: 100%;
      border: 1px solid #bbb;
    }    
  }

JavaScript

/**
 * Pure JavaScript/CSS library for validating DOM input fields
 * https://github.com/AntonLapshin/popup-validation
 * https://www.npmjs.com/package/popup-validation
 */

validation.init("form", {
message: "Prueba"
});

validation.rules["required"] = {
  message: "Value is not an integer",
  method: el => {
    return el.value.length === 0 || !isNaN(parseInt(el.value, 10));
  }
}

//
// Custom Class Validation Example
//
var enabled = false;
validation.addClassValidation("#customClassValidation", ".my-class-invalid", "Field is invalid");
document.getElementById("customClassValidation").addEventListener("click", function(e) {
  if (enabled) {
    e.target.className = e.target.className.replace(/my-class-invalid$/, "");
  } else {
    e.target.className += " my-class-invalid";
  }
  enabled = !enabled;
});

//
// Manual Validation Example
//
document.getElementById("manualValidation").addEventListener("click", function(e) {
  validation.show("#manualValidation", "My custom message");
});