form-validator-jq

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: [e-mail]