SimpleV

SimpleV is a simple form validation component written in JavaScript, using only jQuery core functionalities. Some of the features are:

  • can validate inputs, textareas, checkboxes, radios and selects
  • is easy-to-use thanks to inline data-attributes
  • automatically attaches to form elements
  • does not require you to add CSS or images
  • does not require additional JavaScript libraries other than jQuery 1.4+
  • is browser backwards compatible down to Internet Explorer 8

// Documentation

    // Include

    You can place the SimpleV script include basically wherever you want, just make sure that jQuery is loaded before. jQuery is required and must be at least version 1.4 to work with SimpleV. Remember to pick jQuery 1.x if you need support for Internet Explorer ≤ 8, otherwise pick 2.x or 3.x.

    1. body
    2. head
    1. <html>
          <head>

              ...

              <script src="jquery.js"></script>

          </head>
          <body>

              ...

              <script src="jquery.simplev.js"></script>

          </body>
      </html>

    // Initialization

    1. Add the attribute data-v to the forms you want to validate.
    2. Add the attribute data-v to all input elements you want to validate and specify the expected input (see Validation section).
    3. Call SimpleV.init() once.

    1. <form method="post" data-v>

          <input data-v="required, min 10, max 100" />
          ...

      </form>

      <script>
          SimpleV.init();
      </script>

    4. You can access an array of the initialized forms anytime using: SimpleV.forms
         or SimpleV.form for the first form (functionally equal to SimpleV.forms[0]).

    // Validation

    You can specify the following options in any order. Separate multiple options using commas.

    optiondescriptionusage example
    requiredExpecting to see at least one character/selection.
    Whitespaces are trimmed by default and do not count.
    data-v="required"
    min nExpecting to see a minimum of n characters/selections.
    Whitespaces are trimmed by default and do not count.
    data-v="min 10"
    max nExpecting to see a maximum of n characters/selections.
    Whitespaces are trimmed by default and do not count.
    data-v="max 100"
    /regexp/Expecting the input to match the specified regular expression pattern.data-v="/^[0-9]+$/"
    emailExpecting an e-mail address. Naïve pattern check: x@y.zdata-v="email"
    notrimAllow whitespaces to count towards the input, i.e. do not trim the input.data-v="notrim"

    You may customize invalid feedback messages using the attribute: data-v-msg

    1. <input name="username" data-v="required, email" data-v-msg="Please enter your username to continue." />

    To localize the default feedback messages, overwrite the values in: SimpleV.l10n

    1. <script src="jquery.simplev.js"></script>
      <script>
          SimpleV.l10n = {
              INPUT_REQUIRED:     'This field is required.',
              INPUT_MIN:          'This field must contain at least {min} characters.',
              INPUT_MAX:          'This field must not exceed a total number of {max} characters.',
              INPUT_PATTERN:      'This field does not match the expected pattern.',
              INPUT_EMAIL:        'This field is not a valid e-mail address.',
              SELECTION_REQUIRED: 'Selection is required.',
              SELECTION_MIN:      'Select at least {min} options.',
              SELECTION_MAX:      'Select no more than {max} options.'
          };
      </script>

    // Constructor

    • SimpleV.init ( container, options )
      - fetches all form elements with attribute data-v
      - if you do not specify container, the whole body is looked at
      - you may specify data-v="false" to skip individual forms

    // Methods

    • SimpleV.isValid ( form ) : boolean
      validates the specified form and returns if the form passed the validation

    // Callbacks

    • SimpleV.onValid ( )
      - callback invoked after the validation passed
      - return false to interrupt the submit event
    • SimpleV.onInvalid ( )
      - callback invoked after the validation did not pass

    // Options

    options
    delayValidationtruetrue:  start validation after the input was left for the first time
    false: start validation immediately
    scrollIntoViewtrueautomatically scroll into view of the first element that did not pass validation
    scrollIntoViewDuration600duration of the scroll into view animation in milliseconds
    scrollIntoViewOffset-32offset added to the position of the first element, which receives the scroll into view
    className'simplev-message'class of the message element dynamically added on validation
    validClass'simplev-valid'class to set on the input element in case the validation passed
    invalidClass'simplev-invalid'class to set on the input element in case the validation failed
    logfalselog SimpleV related warnings and infos in the console

    // Examples

    •  
    •  
       
       
    •  
       
       

    multi checkboxes

    To make min and/or max work, all <input type="checkbox"> need to be grouped by their "name" attribute:

    1. <input type="checkbox" name="traits" value="attractive" data-v="min 1, max 2" />
      <input type="checkbox" name="traits" value="rich" />
      <input type="checkbox" name="traits" value="smart" />

    select's default selection

    To make required work, the "nothing selected" <option> needs to be an empty value:

    1. <select data-v="required">
          <option value="">I like...</option>
          <option value="dogs">dogs</option>
          <option value="cats">cats</option>
          <option value="both">both</option>
      </select>

    // License

    MIT, Copyright (c) 2018 Alexander Kwaschny, kwaschny.net

    // Download