File "test02.html"

Full Path: /home/analogde/www/Design/fileman/Fusion/formulaire_bootstrap/test02.html
File size: 3.28 KB
MIME-type: text/html
Charset: utf-8

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

<script>

let validator = $('form.example').jbvalidator({
    language: 'dist/lang/fr.json'
});

</script>

<form class="example" novalidate>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" placeholder="name@example.com" required>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" name="password" class="form-control" id="password" title="password" required>
  </div>
  <div class="form-group">
    <label for="password">Confirm Password</label>
    <input name="repassword" type="password" class="form-control" data-v-equal="#password" required>
  </div>
  <div class="form-group">
    <label>URL</label>
    <input type="url" class="form-control" placeholder="http://www" required>
  </div>
  <div class="form-group">
    <label>Using Regex</label>
    <input type="text" class="form-control" pattern="[0-9]+" title="Only number." required>
  </div>
  <div class="form-group">
    <label>Custom Min/Max Values</label>
    <input type="text" class="form-control" data-v-min="10" data-v-max="100">
  </div>
  <div class="form-group">
    <label>Custom Min/Max Length</label>
    <input type="text" class="form-control" data-v-min-length="5" data-v-max-length="10">
  </div>
  <div class="form-group">
    <label>Multiple Select</label>
    <select class="form-select" multiple data-v-min-select="2" data-v-max-select="3">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
      <option value="5">Five</option>
    </select>
  </div>
  <div class="form-group">
    <label>Textarea</label>
    <textarea class="form-control" minlength="10" maxlength="165"></textarea>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" >
      <label class="form-check-label" for="defaultCheck1">
      checkbox 1
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" >
      <label class="form-check-label" for="defaultCheck2">
      checkbox 2
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck3" >
      <label class="form-check-label" for="defaultCheck3">
      checkbox 3
      </label>
    </div>
  </div>
  <div class="form-group">
    <label>File Input</label>
    <input type="file" class="form-control" data-v-min-size="400" data-v-max-size="450">
  </div>
  <div class="form-group">
    <label>Date Input</label>
    <input type="date" class="form-control" min="2020-10-20">
  </div>
  <div class="form-group">
    <label>Custom message</label>
    <input type="text" class="form-control" minlength="10" data-v-message="Please enter minimum 10 characters" required>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" value="Submit">
  </div>
</form>