Web Form

<!DOCTYPE html>
  <html>
      <head>
          <title>Password Input Control</title>
      </head>
  <body>
      <form>
          User ID :  <input type="text" name="user_id" />
      <br>
          Password:  <input type="password" name="password" />
       <br>
           Description : <textarea rows="5" cols="50" name="description">
      <br>
<!-- Used to give a name to the control which is sent to the server to be recognized and get the value. The value that will be used if the checkbox is selected.
-->
        <input type="checkbox" name="maths" value="on"> Maths
          <input type="checkbox" name="physics" value="on"> Physics
        <br>
        <input type="radio" name="subject" value="maths"> Maths
          <input type="radio" name="subject" value="physics"> Physics
        <br>
        <!-- Used to give a name to the control which is sent to the server to be recognized and get the value. 
       -->
            <select name="dropdown">
              <!-- The value that will be used if an option in the select box box is selected. -->
              <option value="Maths" selected>Maths</option>
              <option value="Physics">Physics</option>
             </select>
            <br>
          <input type="file" name="fileupload" accept="image/*" />
          <br>
            <!-- button -->
            <input type="submit" name="submit" value="Submit" />
            <input type="reset" name="reset"  value="Reset" />
            <input type="button" name="ok" value="OK"  />
            <input type="image" name="imagebutton" src="/html/images/logo.png" />
       </form>
  </body>
  </html>

Form Input Types
- each input field has an associated tag. The for attribute for the label tag matches up with the id attribute of the associated input tag. This keeps our HTML semantic, with the labels helping to give meaning to the input controls. It also means that if you click the label, the associated input tag receives the focus.

Delegating Events

To save memory, we can bind one event handler to a single ancestor element that serves multiple descendants, or enable event handling for a new created elements.

Form Events

blur: lose focus
change: value changed
focus: element is focused
select: text in the form is selected
oninvalid: occurs when a submittable element is invalid

submit: form is submitted

// jQuery approach
$("form").submit(function (e) {
   if ($("input").val() == 0) {
     // to interrupt the action of the form
       e.preventDefault(); // or return false; 
   }
 });

// javascript approach 
document.getElementsByTagName("form")[0].submit();

Form Validation

HTML 5 Validation

HTML 5 includes constraint APIs for validating element. The core of constraint validations is an algorithm browsers run when a form is submitted.

The HTMLSelectElement.checkValidity() method checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable invalid event at the element, and then return false.

<!-- required is needed to use HTML 5 Validation -->
<li>
   <label for="email">Email:</label>
   <input type="email" name="email" id="email" required>
   <p id="errormessage"></p>
</li>

/* this example is taken from PACKT - Master Jquery, it is not a complete good example, only used for illustration purpose. */

if (emailField.is("input") && emailField.prop("type") === "email") {
        /* issue a change event */
        emailField.on("change", function(e) {

        /* check constraint validation, issue a invalid event if false 
        The field value must be an email. By using email or url as a value for the type attribute, a constraint is automatically added and the fields are validated automatically when the form is submitted. The browser also displays an error message in a very user friendly way if any validation errors occur.
        */
               var result = emailField[0].checkValidity();
            if (!e.target.validity.valid) {
                $(this).removeClass("success").addClass("error")
            } else {
                $(this).removeClass("error").addClass("success")
            }
        });

        function checkEmail(email) {
            pattern = new RegExp("[^ @]*@[^ @]*\.[a-zA-Z]{2,}");
            pattern.test(email);
        }
        /* raise invalid event if constraint is false */
        emailField.on("invalid", function(e) {
            e.target.setCustomValidity("");
            var email = emailField.val();
            checkEmail(email);
            if (e.target.validity.patternMismatch) {
                e.target.setCustomValidity("I need to see an email address here, not what you’ve typed!");
            }
        });    
}

HTML 5 Rocks - Constraint Validation: Native Client Side Validation For Web Forms

| Name | Type | Description | | ----------------- | --------- | ---------------------------------------- | | validateMessage | Attribute | Returns the error message that is displayed based on the current state of the form. | | validity | Attribute | Returns a "ValidityState" object for the element. The object contains useful read-only, Boolean attributes to provide what specifically was invalid or not. For example, the valueMissing attribute will return true if the input was required. | | willValidate | Attribute | Returns true if an element can be validated. | | checkValidity | Method | Returns true if the form element is valid, otherwise false. If the element is not valid, an invalid event is fired. | | setCustomValidity | Method | Sets a custom error message for the form element. Setting this message causes the form element to be in an invalid state. To clear error, set with empty string. |

Custom Error Message

(function() {
    // helper functions
    function id(elementId) {
        return document.getElementById(elementId);
    }

    function addEvent(src, eventName, func) {
        src.addEventListener(eventName, func, false);
    }
    // custom validation
    function validate(evt) {
        // reset any existing messages
        this.setCustomValidity("");
        if (!this.validity.valid) {
            // if custom message exists, use it
            if (this.errMessage) {
                this.setCustomValidity(this.errMessage);
            }
        }
    }
    // initialize validation for input
    function initValidate(src, errMessage) {
        // if errMessage provided, set to input
        if (errMessage) { src.errMessage = errMessage; }
        addEvent(src, "change", validate);
        addEvent(src, "invalid", validate);
    }
    // initialize javascipt module
    function initialize() {
        initValidate(id("name"), "Your full name is required!");
    }
    // wire up to loading of document
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", initialize, false);
    } else {
        window.attachEvent("onload", initialize);
    }
})();

Style required field

<style>
    input {
        border: solid 1px #000;
    }
    input:required:invalid  {
         background-image: url(/images/invalid.png);
         background-position: right;
         background-repeat: no-repeat;
    }
    input:required:valid  {
      background-image: url(/images/valid.png);
      background-position: right;
      background-repeat: no-repeat;
    }
</style>

Form Validation Framework
- JQuery Validator
  - Integration with Bootstrap
- Lightweight JavaScript Form Validation
- JQuery Form Validator
- Parsley.js
  - Documentation
- jqBootstrapValidation
- Bootstrap Validator
- formValidation.io
  
  Web Site: https://github.com/formvalidation/formvalidation.io
  
  Can directly build from there.
  
  follow the instruction from error message
- Microsoft Unobtrusive Client Validation
Reference**

HTML 5 Form Framework
- Ideal Forms, doc link
File Upload
- Ajax File Upload
- Build A Ajax File Uploader with Node

Form Design
- Reference

Kendo UI Form
- Kendo UI Form

Web Form

Web Form

Form Input Types

Form Events

Form Validation

HTML 5 Validation

Form Design

Kendo UI Form

results matching ""

No results matching ""