© Kademi 2022
jQuery Forms plugin
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.