Git Product home page Git Product logo

jquery.forms's Introduction

jquery.forms

The jQuery.forms library has been written to simply:

  1. Frontend validation and styling of forms.
  2. Validation types using regex and validation function set.
  3. Dynamically populating multiteir object data into forms.
  4. Calls that check to ensure the data is valid before proceeding

jQuery Forms and Frontend Validation. Validation any form element by adding a data-required attribue and a validation function to the validation class in jquery.forms.js


USAGE AND INITIALIZATION / GENERAL HTML

Adding a data-required attribue and a validation function will set that fields in the form have valid data. On a form check if there is an error an ".error" class will be added to the input/textarea/select tag.

<form id="form-id-name" method="POST">
  <input type="text" name="name" value="" data-required="valid_notnull" />
  <input type="text" name="email" value="" data-required="valid_email" />
  <input type="text" name="phone[mobile]" value="" data-required="valid_phone" />
  <button type="submit">Submit</button>
</form>

USAGE AND INITIALIZATION / GENERAL HTML

$(document).ready(function() {
    var form = $("#form-id-name");
    
    $("button[type=submit]", form[0]).on("click", function(event) {
        //  The "Form.validates(form)" function calls the validation check
        if (Form.validates(form)) {
            // On a sucessfull validation call
            return true;
        } else {
            // On failed validation call
            event.preventDefault();
            return false;
        }
    });
});

USAGE AND INITIALIZATION / ERROR REPORTING

Errors are automatically pushed to

<div class="errors"></div>

POPULATING FORM DATA

var form = $("#form-id-name");
var variables = {
  "name": "Test User Name",
  "email": "[email protected]",
  "phone": {
    "mobile": "123-123-1234"
  }
}
$(document).ready(function() {
  form.values(variables)
})

VALIDATION FUNCTIONS

There are already basic validation functions in the validation library.

valid: 
valid_notnull: 
valid_isnotnull:
valid_email:
valid_phone:
valid_username:
valid_password:
valid_password_confirm: 
valid_new_password_confirm: 
valid_postal_code: 
valid_captcha: (ReCaptcha)
valid_terms_of_service: 

Custom validation functions can also be created in other assets/pages that are specific to that asset or page.

Forms.add_validation(name, function(input) {
   // Add your check on the input and return true/false 
   // depending on the result of the validation
});

jquery.forms's People

Contributors

joeycaughey avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.