cuddimatic/automatic-form-validation

Automatic javascript validator to HTML fields forms using data- HTML5 attributes.

Valiform.js

Valiform.js is an automatic javascript library to validate HTML form fields using data- HTML5 attributes. It has little more than 12Kb. Without dependencies, like jQuery, but compatible with them.

##Example:

• http://codepen.io/manufosela/pen/PqZdrq (Live Codepen)
• http://manufosela.es/lib/valiform/demo.html

##Complex Example: http://manufosela.es/lib/valiform/demo2.html

##Simple Use First add in yout HTML

<script type="text/javascript" src="valiform.min.js"></script>

Second add data-validate="true" to form tag

And third add data- attributes to form fields:

data-required="true" to mandatory fields
data-tovalidate="XXXX" to check the value with XXXX type

For example:

  <form id="myForm" data-validate="true">
    <input type="text" placeholder="type something.." data-required="true" data-tovalidate="alpha" />
     [...]

valiform.js automatically adds a red asterisk at the end on the tag

##data-tovalidate types Valiform.js can validate the next fields type:

• int or integer: integer numbers
• float: float numbers, numbers and .
• number or numero: numbers
• alpha or alfa or text or texto: text values, not numbers.
• text-: text values and -
• alphaNumericSpace or textspace: alphanumeric values with spaces, text and numbers with spaces
• alphaNumeric or textnum: alphanumeric values, text and numbers
• email or correo: email address
• iccid: integrated circuit card identifier
• nummovil or movil or mobile: Telephone number (mobile phone, not international phone)
• numfijo or fijo or landphone: Telephone number (land phone)
• telefono or tel or telephone: Telephone number (mobile or land phone)
• cp or postalcode: postal code
• cuentabancaria or accountnumber: account number
• tarjetacredito or creditcard: credit card
• nif: Número de Identificacion Fiscal in Spain
• cif: Código de Identificación Fiscal in Spain
• nie: Número de Identidad de Extranjero in Spain
• fecha or date: Date
• noempty: any value

##Code Example:

###HTML:

<form id="myForm" data-validate="true">
  <div class="form-group">
    <label for="name">Your name</label>
    <input id="name" name="name" type="text" placeholder="type your name" data-required="true" data-tovalidate="alfa" />
  </div>

  <div class="form-group">
    <label for="mobile">mobile number</label>
    <input id="mobile" name="mobile" maxlength="9" type="text" placeholder="type your mobile number" data-required="true" data-tovalidate="movil" />
  </div>

  <div class="form-group">
    <label for="email">tu email</label>
    <input id="email" name="email" type="text" placeholder="type your email" data-required="true" data-tovalidate="email" />
  </div>

  <div class="form-group">
    <input id="accept" name="accept" type="checkbox" data-required="true" />
    <span>Accept conditions</span>
  </div>

  <div class="links">
    <button id="submitBtn" type="submit" class="btn btn-default" data-checkform="true">Submit</button>
  </div>

</form>

###javascript

  var val = new Valiform();

  document.getElementById("myForm").addEventListener("submit", function(evt) {
    // For example my Ajax Code to send form
    alert( "FORM CORRECT. SENDING FORM...");
    return false;
  });

##Complex uses

###data-name attribute

Add a data-name attribute to form fields extra label near of radio or checkbox fields, to show error message when these fields are wrong. data-name atribute has the value of the name of a radio o checkbox field marked to be checked. When the named field has a wrong value it is marked instead of the radio or checkbox field.

<div class="form-group">
  <label id="labelHasphone" data-name='hasphone'>Do you have a phone number?</label>
  <label for="hasphoneNO">
    <input id="hasphoneNO" name="hasphone" type="radio" data-required="true" value="nophone" />
    No
  </label>
  <label for="hasphoneYES">
    <input id="hasphoneYES" name="hasphone" type="radio" data-required="true" value="yesphone"/>
    Yes
  </label>
</div>

###data-activate / data-deactivate and data-type=hiddenON

Add a data-activate and data-deactivate attributes to form fields to show fields when a value is select in referered data- value.

The fields with data-activate/data-deactivate must be a data-type hiddenON and must have the attribute type, indicating the type of field to show when not hidden.

<div class="form-group">
  <label id="labelHasphone" data-name='hasphone'>Do you have a phone number?</label>
  <label for="hasphoneNO">
    <input id="hasphoneNO" name="hasphone" type="radio" data-required="true" value="nophone" />
    No
  </label>
  <label for="hasphoneYES">
    <input id="hasphoneYES" name="hasphone" type="radio" data-required="true" value="yesphone"/>
    Yes
  </label>
</div>

<fieldset data-activate="hasphoneYES" data-deactivate="hasphoneNO">
  <label for="phone">Phone number</label>
  <input id="phone" name="phone" data-type="hiddenON" type="text" data-required="true" data-tovalidate="telephone" placeholder="Your telephone number" />
</fieldset>

###data-checkrealtime

By default the value is true. When a field lost the focus, this one is checked and a warning message is showed, if the value is not valid, in function to the value of data-tovalidate and data-required. If you add the attribute data-checkrealtime equal to false it avoids check the form when a field lost the focus. The form is checked before the submit action, in that case, if any field is wrong this one will be checked when it lose the focus.