form-validator-jq

1.0.3 • Public • Published

FormValidator (v1.0.2)

Plugin in jQuery to validate your forms using ajax or not. A validation differently!


Install (npm)

npm install form-validator-jq

Features

  • Validation of any form;
  • No need for CSS;
  • Possible create confirmation message to submiter form (optional);
  • Validates all kinds of inputs: input, select, checkbox, radio and textarea;
  • Possible submit in AJAX or standard;
  • Callbacks for AJAX method (success and error);
  • Allows you to create your own validations (custom);
  • Specific, personalized methods for success and validation error;
  • Method to perform actions before and after for AJAX method;
  • Avaiable in 3 languages: portguese(pt-bt), english(en), spanish(es);

Particularities

  • Works with jQuery library;
  • Compatible with any form;
  • Because it is compatible with any form, errors are displayed in an "alert";
  • Works with the ID attribute (ex.: <form id="my-form"></form>);

Options

Here's a list of available settings (default).

$("#my-form").formValidator({
  before: function(){},
  after: {
      successValidation: function(){},
      errorValidation: function(){}
  },
  submitEnable: true,
  confirmSubmit : '',
  myValidations: [],
  sending: {
      type: 'redirect',
      dataType: 'html',
      success: function(){},
      error: function(){}
  },
  lang:'pt-br'
});
Attribute Type Default Description
before Function null Activities performed before validation (ex .: loading ...).
after Functions null Activities performed after validation (ex .: remove loading ...).
submitEnable Boolean true Enable or disable formValidator.
confirmSubmit String empty Message to ensure that the user really wants to submit.
myValidations Array null Lets you create multiple functions to perform special validation (returns a string).
sending Settings ... Settings to set the send mode (ex .: ajax).
lang String pt-br Language in which the plugin will work.

Usage

Include in header your Html:

  <script src="js/jquery.formValidator.js"></script> 
Data Attributes Description
data-required With "true" or "" false "reports whether the input is required or not (ex .: <input name="name" data-required="true"/>).
data-title Display name for the input, but can be replaced with a label containing the element name (ex .: <input name="name" data-required="true" data-title="Name" />).
data-equals When a field needs to be the same as another, much used in passwords (ex .: <input name="pass" data-required="true" data-title="Password" data-equals="repass" />).
data-min-characters Restrict the minimum amount of characters that the field has (ex .: <input name="pass" data-required="true" data-title="Password" data-min-characters="8" />).

Examples

HTML 01 (Form login):
Form that exemplifies a login where all fields are required.

    <form name="my-form" id="my-form" method="POST" action="send.php">
        <div class="form-group">
            <label>E-mail</label>
            <input type="text" name="email" data-required="true" data-title="E-mail" />
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" name="pass" data-required="true" data-title="Password" />
        </div>
        <div class="form-group">
            <button name="pass">Submit</button>
        </div>
    </form>

HTML 01 - JavaScript:

  • Case 01:
    Simplest way to call the plugin.
    $(function(){
        $('#my-form').formValidator();
    });
  • Case 02:
    Thus it is determined consignment type "ajax", with callbacks methods "success" and "error".
    $(function(){
        $('#my-form').formValidator({
            confirmSubmit: 'Are you sure to submit?',
            sending: {
                type: 'ajax',
                success: function(data){
                  if(data==1){
                    alert("Submitted successfully!");
                  }
                  else{
                    alert("Failure to submit!");
                  }
                },
                error: function(){
                    alert("Failure to submit!");
                }
            }
        });
    });

HTML 02 (Form register):
Form that contains a special feature where passwords are required and should be equal.

    <form name="my-form" id="my-form" method="POST" action="send.php">
        <div class="form-group">
            <label>E-mail</label>
            <input type="text" name="email" data-required="true" data-title="E-mail" />
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" name="pass" data-required="true" data-equals="repass" data-title="Password" />
        </div>
        <div class="form-group">
            <label>Re-Password</label>
            <input type="password" name="repass" data-required="true" data-title="Re-Password"  />
        </div>
        <div class="form-group">
            <button name="pass">Submit</button>
        </div>
    </form>

HTML 02 - JavaScript:

  • Case 01:
    Simplest way to call the plugin.
    $(function(){
        $('#my-form').formValidator();
    });

Donate to help: Click Here


Send email to support: ericferreira1992@gmail.com

Package Sidebar

Install

npm i form-validator-jq

Weekly Downloads

3

Version

1.0.3

License

ISC

Last publish

Collaborators

  • ericferreira1992