A Better Form – Options | {"JSON":"LAU"}

This page lists all of ABetterForm’s available options. Options define and control the behavior of ABetterForm.

Below is an example of how options are used.

jQuery("#my-div").abform({
// Options go here. Separate options with a comma.
json_form: 'myform.txt',
pluggable: myFunction,
submit_class: 'absubmit'
// No comma following the last option!
// End options
});

alert_type
This controls the type of alert message used when a form field fails validation. Possible values are js or html. The js setting will produce a JavaScript alert popup, and the html setting will produce a div container below the form field. The div container will have the same class as the error_class option.
string
js, html
js
```
alert_type: 'html'
```

ajax_form
This is the location for a file which contains the HTML for your form. You can exclude the form tag from your HTML code.
string (URL)
null
```
ajax_form: 'myform.txt'
```

attributes
The attributes option holds any form attributes you would normally use in a form tag. However, this option is not required. If the attributes option is omitted, the form will POST by default and the parent page will be the form-action target.
string
'action="#" method="post"'

attributes :'id="my-form" action="index.html" method="GET"'

clickonce
Disable the submit button after the user clicks on it. This prevents multiple clicks.
boolean
true, false
true
```
clickonce: true
```

convert
When formatted correctly, this option converts the specified object to the specified form element type. Here is an example of how to properly format the convert option:
```
convert : '{Object ID|New Form Element Type|Additional Attributes}{Object ID|New Form Element Type|Additional Attributes}'
```
```
convert : '{myId|text|style="background-color: red;" class="myClass"}{myId2|file}{myId3|select}{myId4|button}'
```
{brackets} separate objects and |pipes separate options.
Converts to the following form elements:
- text: Text field
- textarea: Text area
- password: Password field
- file: File select field
- button: Push button
- submit: Form Submit button
- reset: Form Reset button
- image: Image button
- select: Select menu **Requires specific HTML formatting. See the examples tab for more information on how to properly format this option.**
- hidden: Hidden field
- checkbox: Check box ** Depends on the rel attribute to hold the field name.
```
convert: '{myCheckbox1|checkbox|rel="myCheckboxName[]"}{myCheckbox2|checkbox|rel="myCheckboxName[]"}'
```
- radio: Radio button ** Depends on the rel attribute to hold the field name.
```
convert: '{myRadioButton1|radio|rel="myRadioButtonName" checked="checked"}{myRadioButton2|radio|rel="myRadioButtonName"}'
```
string
null

cookie_field
A Better Form will automatically insert a hidden field in the form which holds the value for the form validation cookie. This option sets the name for that hidden field. The cookie value will be submitted with the other fields in the form. You can validate the form submission by comparing the hidden field value with the actual cookie value. This option depends on the require_cookies option.
string
abcookie
```
cookie_field: 'abcookie'
```

custom_classes
This is a list of class names and associated callback functions which will be executed at the time of submission. Make up a class name, then create any function you want to execute on the object which your custom class is assigned. Create any number of classes and functions. Return a string with your function and A Better Form will assume the field data failed a test. The returned string will then be used for the text of a JavaScript alert. Return boolean or anything other than a string and A Better Form will continue processing without interruption. Must be formatted as follows: {class name:function name}{class name:function name}{class name:function name}
string
null

custom_classes : '{custom-class1:myCustomCallbackFunction1}{custom-class2:myCustomCallbackFunction2}'

ABetterForm will pass the field id and value to your function.

var myCustomCallbackFunction1 = function(field_id, field_value){
alert(field_id + ' = ' + field_value);
}

debug
Toggles debug mode. Appends textareas to the form and displays the output code during different stages of form submission.
boolean
true, false
false
```
debug: true
```

error_class
Class or classes to be assigned to any form fields which fail validation. This will also be assigned to the error message container depending on the alert_type option.
string
aberror

error_class: 'aberror ui-state-highlight'

filtertext
Apply text filters to each text field or text area. Depends on the textfilters option.
boolean
true, false
true
```
filtertext: true
```

form_expires
Sets an expiration time for the form calculated in minutes. 0 is no expiration. After the set amount of time, the form will be hidden. Depends on the following options: error_alert, alert_type, refresh_expired, and alert_form_expired.
number
0
```
form_expires: 15
```

hover_enable
Disables all form fields if the mouse leaves the form.
boolean
true, false
false
```
hover_enable: true
```

html
The HTML code for your form. Use this option instead of the convert option if you want. Use a div container in your HTML and place all of your form's HTML code in this option. You may omit the form tag.
string
null

html : 'Text Area: <textarea id="mytextarea"></textarea> Required Email Field: <input id="mytext" value="" class="abrequired abemail" type="text" /> <input id="mybutton" value="Submit" class="absubmit" type="button" />'

Tip: If your form HTML is contained in single-quotes, be sure to escape any single-quotes you use in your HTML with a \backslash. Same goes for double-quotes; if your form HTML is contained in double-quotes, be sure to escape any double-quotes you use in your HTML with a \backslash.

var myHTML = '\nShouldn\'t couldn\'t wouldn\'t isn\'t wasn\'t .\n'

var myHTML = "\nHe said, \"No, I wont smell your finger\"!\n";

Demo Page

invalid_alert
Enables or disables the alert popup when a form field fails validation.
boolean
true, false
true
```
invalid_alert: true
```

json
JSON encodes the output while the pluggable option is enabled.
boolean
true, false
false
```
json: true
```

refresh_expired
Automatically reloads the webpage when the form expires. Depends on the form_expires option.
boolean
true, false
false
```
refresh_expired: true
```

json_form
This is the location for a file which contains the JSON encoded HTML for your form. You can exclude the form tag from your HTML code.
string (URL)
null
```
json_form: 'myform.txt'
```
And the JSON file should be formatted as follows:
```
{"form":"Text Area:

Required Email Field: 
"}
```
The form HTML should be placed in the json form object. All of the HTML's quotes should be properly escaped with a \backslash.

multipart
Is it a multipart form? This is simply a shortcut to typing it into the form attributes. You cannot use the serialized option for forms which use the file select field. jQuery does not serialize the file select field.
boolean
true, false
false
```
multipart: true
```

pluggable
This option lets you plug-in to ABetterForm with your own function. Instead of the using the default submit action, you can use your own function to handle the form data. ABetterForm will automatically serialize the form data and send it back to your function. From there you can parse it, validate it, submit it, or whatever.
function
null

pluggable: myFunction

var myFunction = function(serialized){
alert(serialized);
}

require_cookies
This option will enable or disable the use of cookies. Cookies are used to add an extra layer of validation for the form submission. A Better Form will remove the form if the user does not have browser cookies enabled. The form will be replaced with HTML which is defined in the cookies_required language option.
boolean
true, false
true
```
require_cookies: true
```

sequential_disable
"Sequential Disable" is a term I use to describe my method of disabling form objects in sequence depending upon their values. For example, if a form field is empty, all fields below it are disabled automatically. Each field is enabled in sequence if the field before it has a value.
boolean
true, false
true
```
sequential_disable: true
```

serialized
This enables or disables the form serialization while using the pluggable option.
boolean
true, false
true
```
serialized: true
```

submit_class
This is the class name for the form submit object. Assign this class to any object which will serve as the form submit button.
string
absubmit
```
submit_class: 'absubmit'
```

textfilters
A comma separated list of filters which will be automatically removed from text fields as the user types. Depends on the filtertext option.
string
'url=,link=,http:,www.,href,

textfilters : 'url=,link=,http:,www.,href,

validator_class
When clicked, any object with this class will run the form validation process. Additionally, a cookie with the name abvalid will be set with a true or false value depending on if the form passed validation or not. The form will not be submitted and the pluggable function will not run during validation. You do not need to give the submit button this class as it already includes this.
string
abvalidate
```
validator_class: 'abvalidator'
```

Your Email:
Confirm Email:
Subject:
Message:
Security Code:
Copy Security Code:
Carbon Copy To Self:	Yes No

Contact Me

Hire Me

{"JSON":"LAU"}

Web Development & Programming

A Better Form – Options

Below is an example of how options are used.

Pages

Categories

Recent Docs

Contact Me

Hire Me

{"JSON":"LAU"}

Web Development & Programming

A Better Form – Options

Below is an example of how options are used.

Log In

Pages

Categories

Recent Docs