1.0.3 • Published 8 years ago

form-validator-jq v1.0.3

Weekly downloads
2
License
ISC
Repository
github
Last release
8 years ago

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'
});
AttributeTypeDefaultDescription
beforeFunctionnullActivities performed before validation (ex .: loading ...).
afterFunctionsnullActivities performed after validation (ex .: remove loading ...).
submitEnableBooleantrueEnable or disable formValidator.
confirmSubmitStringemptyMessage to ensure that the user really wants to submit.
myValidationsArraynullLets you create multiple functions to perform special validation (returns a string).
sendingSettings...Settings to set the send mode (ex .: ajax).
langStringpt-brLanguage in which the plugin will work.

Usage

Include in header your Html:

  <script src="js/jquery.formValidator.js"></script>
Data AttributesDescription
data-requiredWith "true" or "" false "reports whether the input is required or not (ex .: <input name="name" data-required="true"/>).
data-titleDisplay 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-equalsWhen 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-charactersRestrict 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

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

9 years ago