Validating fields when submitting form

1

How can I validate multiple fields in the form where these fields are created dynamically?

Example:

<tr align="right">
  <td style="font-size: 11px;"><b>Item 1 - Descontos:</b></td>
  <td><input type="text" name="Desconto11" value="30" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto12" value="5" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto13" value="5" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto14" value="" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto15" value="" class="inputs" size="2" placeholder="%"></td>
</tr>
<br>

<tr align="right">
  <td style="font-size: 11px;"><b>Item 2 - Descontos:</b></td>
  <td><input type="text" name="Desconto21" value="30" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto22" value="5" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto23" value="5" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto24" value="" class="inputs" size="2" placeholder="%"></td>
  <td><input type="text" name="Desconto25" value="" class="inputs" size="2" placeholder="%"></td>
</tr>

I put the field Discount1 to Discount5 where X is represented by the number of the item to which it belongs.

  • "Where Discount1 can not exceed 30"
  • "Where DiscountX2 can not exceed 5 and can only be filled if DiscountX1 is not empty."
  • "Where Discount3 can not exceed 5 and can only be filled if Discount2 is not empty."
  • "Where X5 can not exceed 2 and can only be filled if X10 is not empty."
  • Remembering that the item can go from 1 to 999.

    Could someone give an example of how to do this?

        
    asked by anonymous 29.04.2015 / 21:18

    2 answers

    1

    I see that you have a standard of 5 inputs on each line tr of a table. You can create an object or array with the validation rules and then map those table rows with the result of the validation of each one.

    The method you choose to show the user that you are missing data will have to choose. In my example I will make this visual alert on the line itself. You can adapt to what you need. You also need to specify whether an empty field is accepted or not.

    Here's an example:

    var regras = [30, 5, 5, 3, 2];
    
    function validar() {
        var linhasFalhadas = $('table tr').each(function () {
            var inputsNaoValidados = $(this).find('input').filter(function (i) {
                var value = parseInt(this.value, 10) || 0;
                return value > regras[i];
            });
            if (inputsNaoValidados.length) $(this).addClass('not_valid');
            else $(this).removeClass('not_valid');;
        });
    }
    validar();
    

    jsFiddle: link

        
    30.04.2015 / 06:59
    -1

    Simple example of traversing all form inputs with javascript IT WILL GIVE ERROR IF IT IS SOME BLANK * I did not test but apparently did not see error.

    $(document).ready(function () {
        $("#cadastro").click(function (e) {
            // bloqueando envio do form
            e.preventDefault();
            var erros = 0;
            // verifica se ha campos vazios
            $("#form1 input").each(function () {
                // conta erros
                $(this).val() == "" ? erros++ : "";
            });
            // verifica se ha erros
            if (erros > 0) {
                alert("Existe(em) campo(os) vazio(os) neste fomulário");
            } else {
                //return true;  
                $("#form1").submit()
            }
        });
    });
    
        
    29.04.2015 / 21:28