[SOLVED] No Validation errors showing up using jquery 3x with formvalidator.net

No Validation errors showing up using jquery 3x with formvalidator.net

I am using the latest version 2.2x of Jquery Plugin from formvalidator.net along with bootstrap 4.

jsfiddle : https://jsfiddle.net/adarshmadrecha/ckpLsqod

<body>
<script>
$.validate();
</script>

<div class="container mt-5">
<form>
  <div class="form-group">
    <label for="#txt01"> First Name </label>
    <input type="text" id="txt01" class="form-control" data-  validation="length alphanumeric" data-validation-length="min4">
  </div>

  <div class="form-group">
    <label for="#txt02"> Email </label>
    <input type="text" id="txt02" class="form-control" data-validation="email">
  </div>

  <div class="form-group">
    <input type="button" class="btn btn-info" value="Submit">
  </div>
</form>
</div>
</body>

I am not able to figure out what exactly is wrong with my HTML / javascript. I tried Bootstrap 3 but that too did not work.

ps: This is my first time creating HTML forms.

Solution

Try using the following code, add this cdn form validator js https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js in you fiddle, existing one in not found, throwing 404.

<body>
  <script>
  function validateForm(){
    $.validate();
  }
  </script>

  <div class="container mt-5">
    <form>
      <div class="form-group">
        <label for="#txt01"> First Name </label>
        <input type="text" id="txt01" class="form-control" data-validation="length alphanumeric" data-validation-length="min4">
      </div>

      <div class="form-group">
        <label for="#txt02"> Email </label>
        <input type="text" id="txt02" class="form-control" data-validation="email">
      </div>

      <div class="form-group">
        <input type="button" class="btn btn-info" value="Submit" onclick="validateForm();">
      </div>
    </form>
  </div>

</body>

Fiddle : https://jsfiddle.net/ckpLsqod/11/