jQuery Forms plugin

jQuery Plugn Macros

The Kademi jquery forms plugin simply replaces the normal POST semantics of a html form with an ajax call. It uses the jquery serialise method to turn the form's inputs into a REST'ful POST request.

This plugin should be used for all form submits in Kademi. Its integrated with the standard Kademi validation response framework so invalid inputs are highlighted if the input is rejected due to server side rules.

Usage

  • Must be initialised on a form element
  • The form must contain a button of type submit
  • The form must have method=post
  • The form must either have an action attribute, or the forms plugin must be configured with a url to post to.
 

Basic example

For this html:

<form action="/learner/signup" class="form-horizontal register-form" method="post" role="form">
        <div class="form-group">
                <label class="col-lg-4 control-label" for="firstName">First Name*</label>
                <div class="col-lg-8"><input class="form-control required" id="firstName" name="firstName" required type="text" /></div>
        </div>
        <div class="form-group">
                <label class="col-lg-4 control-label" for="surName">Surname*</label>
                <div class="col-lg-8"><input class="form-control required" id="surName" name="surName" required type="text" /></div>
        </div>
...
        <div class="form-group">
                <div class="col-lg-offset-4 col-lg-8"><button class="btn btn-primary pull-right" type="submit">Register Now</button></div>
        </div>
</form>            

use this javascript to initialise the jquery plugin:

$(".register-form").forms({
    confirmMessage: "Registered ok, now logging you in...",
    onSuccess: function() {
        log("created account ok, logging in...");
        var userName = form.find("input[name=email]").val();
        var password = form.find("input[name=password]").val();
        doLogin(userName, password, {
            afterLoginUrl: "/programs/mycourses/course1/chapter1/",
            urlSuffix: "/.dologin",
            loginCallback: function() {
                showConfirmMessage(form, "Logged in, now opening your ebook..");
            }
        }, this);
    }
});
            

 

Validate Selectors

Selectors Description
.required
For required fields. Includes text boxes, textareas, radio buttons or check boxes
.regex
Check value of field which is using RegExp. RegExp for field will be passed via data-regex attribute
.date
.datetime
Check date and date time field with formats are DD-MM-YYYY, DD-MM-YYYY HH:mm. Using moment.js for validating
#password
.password
Check password field. Password must be at least 6 characters and it must contain numbers and letters
#password.allow-dodgy-password
.password.allow-dodgy-password
Check password field with simple rule "must be at least 1 character"
#confirmPassword
.confirm-password
Check confirm password field
#email
.email

Check email field

.simpleChars
.simple-chars
Check simple characters fields. These fields must contain only letters, numbers, underscores, spaces, dots and dashes
.reallySimpleChars
.really-simple-chars
Check really simple character fields. These fields must contain only letters and numbers
.numeric
Check numeric fields
.href

Check Href fields with RegExp:

^[a-zA-Z0-9_/%:/./-]+$

 

Field's error message and style

When failed in validation, each field will be added error-field class and add error message for this field in attr-message. If you want label color and border color of this field are red, you need to wrap this field in div with class form-group.