2

I created a form starting from the example in the docs in "Validation - Custom styles" section. I added "required" attr to the cumpolsory inputs and validation happens well. Now I would need to add custom valdation to a field that must respect a particular format.

I created the function validaForm() to validate the field and to add the "invalid" class input to it. I would need help in how to use the function in the code *** provided by the Bootstrap example:

// My custom function to validate the field
    function validaForm() {
      var $inputs = $("#frmIscrCant :input:not([readonly])");
      //var values = {};
      $inputs.each(function () {
        //values[this.id] = $(this).val();          
        if ($(this).hasClass("partIVAInput") && $(this).val().trim() != "")
          if (!isValidPIVA($(this).val())) {
            $(this).addClass("is-invalid");
            alert("P.IVA non valida!");
          }
      });
    }

// Code provided by Bootstrap example(***). In this function I need to insert the function above
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        validaForm(); // !!!
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>
Flattit82
  • 63
  • 2
  • 9
  • what are you mean by custom way !! – Nisharg Shah Jun 10 '19 at 19:15
  • I mean validating the filed using a JavaScript function – Flattit82 Jun 10 '19 at 19:53
  • so simply call it when you type !! – Nisharg Shah Jun 10 '19 at 19:54
  • Ok, it may be a solution. But there is no way to custom the example code (***) provied by Bootstrap? Let's guess I need to check - when submit button in clicked - if one ore more fields are correctly filled in function of the value of other fields... – Flattit82 Jun 10 '19 at 20:01
  • Further, I'd like to know how to call the server side PHP script that will 1) check if CAPTCHA code is correct and 2) write to the database the values of the form – Flattit82 Jun 10 '19 at 20:05
  • why you cant change bootstrap code !! you can do it, explanation of bootstrap code >> first of all its find for class called `needs-validation` and after that convert and filter it with array and after its check the validity – Nisharg Shah Jun 10 '19 at 20:08
  • server side is easy, you can check validity when someone press submit and after insert all values in your database – Nisharg Shah Jun 10 '19 at 20:11
  • Please don't ask additional questions in the comments. The PHP validation issue belongs in another post. – isherwood Jun 10 '19 at 20:23
  • Which actions does "form.checkValidity()" perform? How can I modify it's behaviour? It checks only if "requested" inputs are filled but doesn't check how. E.g. in my case I need that "form.checkValidity()" checks - by my function "validaForm()" - that inputs of class "partIVAInput" are filled correctly. – Flattit82 Jun 10 '19 at 22:03
  • When submit button is pressed inputs of class "partIvaInput" not correctly filled have to become red hihlighted with DIV "invalid-feedback" turned-on. Each input can become green and the DIV "invalid-feedback" can disappear only when the user inserts a valid value.
    Inserire una partita IVA valida!
    – Flattit82 Jun 10 '19 at 22:25
  • _in my case I need that "form.checkValidity()" checks - by my function "validaForm()"_ you can also do it by this way – Nisharg Shah Jun 12 '19 at 02:11
  • please don't add HTML like that, you can edit your question and add heading like _EDIT_ and you add this things on that – Nisharg Shah Jun 12 '19 at 02:12
  • So @NishargShah you mean that I can use my validaForm() function instead of form.checkValidity() without having to make any change to attributes of the form and inputs? validaForm() should simply verify all inputs (requested prop., correctly fillng) and applying the classes "is-valid" and "is-invalid" accordingly? – Flattit82 Jun 12 '19 at 15:38

0 Answers0