"null_form_validate" is a custom form validation function that performs client-side validation for input fields based on the specified arguments. It provides an easy-to-use API for customizing validation rules, error messages, and field formatting.

Note: You need to include "null-form-validate.js" JS file or the minified version to your project in order to use "null_form_validate" function.

Usage: 

null_form_validate(selector, args, errorMessages);

Arguments: 

'selector' : (String) : A CSS selector string targeting the form's submit button.

'args' : (Object) : An object containing the validation rules and settings for each input field. The object keys must match the input field IDs. For each field, the following arguments can be specified:

- type (String): Input type. Can be "text", "number", "email", or "password"

- min (Number): The minimum length of the input value.

- max (Number): The maximum length of the input value.

- required (Boolean): Whether the input field is required.

- placeholder (String): The input field's placeholder text.

- debugMode (Boolean): When enabled, logs the input ID and value to the console.

- removeSpaces (Boolean): Removes extra spaces from the input value.

- capitalizeFirstWord (Boolean): Capitalizes the first word of the input value.

- capitalizeEachWord (Boolean): Capitalizes each word in the input value.

- showSuccess (Boolean): When enabled, displays the input value in the error container.

- passwordOptions (Object): An object containing password validation options. Can include the following keys:

     -letters (Boolean): Requires at least one letter.

     -numbers (Boolean): Requires at least one number.

     -symbols (Boolean): Requires at least one symbol.

     -capital (Boolean): Requires at least one capital letter.

'errorMessages' : (Object) : An object containing custom error messages for each validation rule. Can include the following keys:

- required (String): Custom error message for required fields.

- min (String): Custom error message for fields with a minimum length requirement.

- max (String): Custom error message for fields with a maximum length requirement.

- text (String): Custom error message for fields with a "text" type validation.

- number (String): Custom error message for fields with a "number" type validation.

- email (String): Custom error message for fields with an "email" type validation.

- password (String): Custom error message for fields with a "password" type validation.

Examples: 

<div class="null-container">

    <form id="###" class="null-margin-top-20 null-box-shadow null-padding-20 null-border-radius">

      <div class="null-margin-bottom-20">
        <input id="firstName" class="null-form-input">
        <div class="null-form-error" data-null-for="firstName"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <input id="lastName" class="null-form-input">
        <div class="null-form-error" data-null-for="lastName"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <input id="phone" class="null-form-input">
        <div class="null-form-error" data-null-for="phone"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <input id="email" class="null-form-input">
        <div class="null-form-error" data-null-for="email"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <input id="password" class="null-form-input">
        <div class="null-form-error" data-null-for="password"></div>
      </div><!--End null-margin-bottom-20-->

      <button id="###" class="null-button null-button-primary">Submit</button>

    </form><!--End null-margin-top-20-->

</div><!--End null-container-->

  null_form_validate("###", {
    "firstName": {
      type: "text",
      min: 3,
      required:true,
      placeholder:"Please enter your first name",
      capitalizeEachWord: true,
      removeSpaces: true,
      debugMode:true,
      showSuccess:true
    },
    "lastName": {
      type: "text",
      max: 4,
      required:true,
      placeholder:"Please enter your last name",
      debugMode: true,
      showSuccess:true,
    },
    "email":{
      type:"email",
      required:true,
      placeholder:"Please enter a valid email address",
      debugMode: true,
      showSuccess:true,
    },
    "phone":{
      type:"number",
      required: true,
      placeholder:"Please enter a vaild phone number",
      debugMode: true,
      showSuccess:true
    },
    "password":{
      type:"password",
      required:true,
      min:3,
      max:12,
      debugMode: true,
      placeholder:"Please enter your password",
      passwordOptions:{
        letters: true,
        capital: true,
      }
    }
  });

Using custom error messages:

<div class="null-container">

    <form id="###" class="null-margin-top-20 null-box-shadow null-padding-20 null-border-radius">

      <div class="null-margin-bottom-20">
        <input id="firstName" class="null-form-input">
        <div class="null-form-error" data-null-for="firstName"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <input id="lastName" class="null-form-input">
        <div class="null-form-error" data-null-for="lastName"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <input id="phone" class="null-form-input">
        <div class="null-form-error" data-null-for="phone"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <input id="email" class="null-form-input">
        <div class="null-form-error" data-null-for="email"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <input id="password" class="null-form-input">
        <div class="null-form-error" data-null-for="password"></div>
      </div><!--End null-margin-bottom-20-->

      <button id="###" class="null-button null-button-primary">Submit</button>

    </form><!--End null-margin-top-20-->

</div><!--End null-container-->

null_form_validate("###", {
    "firstName": {
      type: "text",
      min: 3,
      required:true,
      placeholder:"Please enter your first name",
      capitalizeEachWord: true,
      removeSpaces: true,
      debugMode:true,
      showSuccess:true
    },
    "lastName": {
      type: "text",
      max: 4,
      required:true,
      placeholder:"Please enter your last name",
      debugMode: true,
      showSuccess:true,
    },
    "email":{
      type:"email",
      required:true,
      placeholder:"Please enter a valid email address",
      debugMode: true,
      showSuccess:true,
    },
    "phone":{
      type:"number",
      required: true,
      placeholder:"Please enter a vaild phone number",
      debugMode: true,
      showSuccess:true
    },
    "password":{
      type:"password",
      required:true,
      min:3,
      max:12,
      debugMode: true,
      placeholder:"Please enter your password",
      passwordOptions:{
        letters: true,
        capital: true,
      }
    }
  },{
    required:"Hey! field is required",
    email:"Opps! where is your email address",
    text:"Hey! where is the value of the input!!?"
  });

Using label:

<div class="null-container">

    <form id="###" class="null-margin-top-20 null-box-shadow null-padding-20 null-border-radius">

      <div class="null-margin-bottom-20">
        <label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="firstName">
          First Name :
        </label>
        <input id="firstName" class="null-form-input">
        <div class="null-form-error" data-null-for="firstName"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="lastName">
          Last Name :
        </label>
        <input id="lastName" class="null-form-input">
        <div class="null-form-error" data-null-for="lastName"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="phone">
          Phone Number :
        </label>
        <input id="phone" class="null-form-input">
        <div class="null-form-error" data-null-for="phone"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="email">
          Email :
        </label>
        <input id="email" class="null-form-input">
        <div class="null-form-error" data-null-for="email"></div>
      </div><!--End null-margin-bottom-20-->

      <div class="null-margin-bottom-20">
        <label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="password">
          Password :
        </label>
        <input id="password" class="null-form-input">
        <div class="null-form-error" data-null-for="password"></div>
      </div><!--End null-margin-bottom-20-->

      <button id="###" class="null-button null-button-primary">Submit</button>

    </form><!--End null-margin-top-20-->

</div><!--End null-container-->

  null_form_validate("###", {
    "firstName": {
      type: "text",
      min: 3,
      required:true,
      capitalizeEachWord: true,
      removeSpaces: true,
      debugMode:true,
      showSuccess:true
    },
    "lastName": {
      type: "text",
      max: 4,
      required:true,
      debugMode: true,
      showSuccess:true,
    },
    "email":{
      type:"email",
      required:true,
      debugMode: true,
      showSuccess:true,
    },
    "phone":{
      type:"number",
      required: true,
      debugMode: true,
      showSuccess:true
    },
    "password":{
      type:"password",
      required:true,
      min:3,
      max:12,
      debugMode: true,
      passwordOptions:{
        letters: true,
        capital: true,
      }
    }
  });