Content / help / biscuits-forms .. concise-view << previous next >>

Forms in Biscuits MVC

Biscuits form example, using biscuits-forms.css and biscuits-forms.js
  1. Create the form HTML
  2. Run js function setForms(params); to add attributes for validation etc., NOTE: The form must belong to class biscuits-db-form if setForms() is to add all the js events for help & validation etc.,

Sample Form

*
Choose a username (a-z 0-9 & No spaces) No capital letters!
*
A confirmation email will be sent
Enter your first name
Enter your last name
Male Female Other

Points to Consider in the signup form

  1. The help class divs contain help that only appears when the input for that help is active or gains focus. Uses visibility:hidden => visibility:hidden
    Note that input and textarea help should remain fixed in position on the page, in other words the div should retain it's space on the page, even when the help is not visible
  2. The following bespoke html5 data-attributes will result in validation of the input data in biscuits-forms.js function getFieldAttributeError
    1. data-charset = "adcdefg" used to define a set of characters to be used for this input/text area The value must be composed entirely of these characters, with no other characters used within the value.
    2. data-row = "various-syntax" Checks are made on the DB relating to the value entered. For example, the value must exist as the id column on a specified table.
  3. Javascript biscuits-forms.js must be loaded into the page.
  4. Some input and textarea elements will have the following attributes appended to or created:
    1. onchange = "return biFieldChange(this);"
    2. onfocus = "showFieldHelp(this.id);"
    3. onblur = " hideFieldHelp(this.id);"
    4. tabindex

How to create a Form with Database actions

  1. Make an HTML form and make sure the form is in the HTML class biscuits Example Biscuits form HTML
    Eg: <form class="biscuits">
    Another example : <form class="biscuits" id="login_et" onsubmit="return loginSubmit();" action="/member/login-submit/" method="post" >
  2. Add any data validation classes to the <input> tags
    Eg: <input class="mandatory" name="surname">
    Make sure that the inputs have a name attribute so that the post data can be found for the entered value.
    1. class="mandatory"

Classes and data-attributes for Biscuits forms

Classes

Elements belonging to the following classes will be validated. See getFieldClassError() in js

  • mandatory null values will be invalid
  • email value must be an email address format.
    (Formt only - Can't check the actual address !! )

Biscuits Pages with forms

Here are some examples of biscuits forms. Visit the pages and check the form <html> markup.
  1. View file form-authentication-signup.php Visit the page.
  2. Contact Us form Visit the page.




iBiscuits LOGO