als-validate v0.7.3

als-Validate

new in 0.7.3

• bug for counting uppers, specials, lowers fixed

new in 0.7.2

• bug for upper, special, lower fixed

new in 0.7.11

• min and max attributes for length validate if type!="number"

new in 0.7

• No need to add attribute email, just use type="email"
• min and max attributes for length validate only at type="text"
• custom validate="invalid|valid" to each input (see example for checkbox)

new in 0.6

• Fixed issue with multiple forms and showing password

new in 0.5

• Disable Autocomplete option not available (didn't work properly and caused some problems)

new in 0.55

• Checkbox validation for required added

new in 0.4

• show password - only by attribute show="true/false"
• password confirmation by adding attribute confirm="id_for_confirm"

Available attributes:

• validate="is-invalid|is-valid"
• error="element-id-for-errors"
• type="email"
• show="true/false"
• min="minimum characters"
• max="maximum characters"
• upper="minumum appercases"
• lower="minumum lowercases"
• number="minumum numbers"
• special="minumum specisa"
• confirm="input_id_for_confirm"
• required
• type="captcha"

<script src="node_modules/als-validator/validate.js"></script>
<script> 
   Validate.forms() // looking for forms and read their attributes
</script>


<form validate="is-invalid|is-valid">
   <div>Email:</div>
   <div><input type="email" name="email" error="email-error" required></div>
   <div><small id="email-error">Write valid email</small></div>

   <br>
   <div>Password:</div>
   <div style="display:flex;">
      <input type="password" name="password" error="password-error" id="password"
      min="8" max="10" upper="0" lower="0" number="0" special="0" show="false" required>
   </div>
   <div><small id="password-error">Type password</small></div>

   <br>
   <div>Confirm Password:</div>
   <div style="display:flex;"><input type="password"  error="repassword-error" 
      name="repassword" required confirm="password" show="false"></div>
   <div><small id="repassword-error">Confirm password</small></div>

   <br>
   <div>Accept policy:</div>
   <label>
      <input type="checkbox" error="policy-error" 
      validate="btn-danger|btn-success" name="policy" required>
      <div>Accept policy</div>
   </label>
   <div><small id="policy-error">Accept policy</small></div>
   
   <br>
   <div>Solve the equation:</div>
   <div><input type="captcha" id='text' error="captcha-error"></div>
   <div><small id="captcha-error"></small></div>

   <div>
      <button type="submit" class="btn btn-primary" id="submit">Register</button>
   </div>
</form>