Field validation when submitting form

Asked

Viewed 505 times

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 placed the field Descontox1 until Descontox5 where X is represented by the number of the item to which it is part.

  1. "Where Descontox1 cannot exceed the value of 30"
  2. "Where Descontox2 cannot exceed the value of 5 and can only be filled if Descontox1 is not empty."
  3. "Where Descontox3 cannot exceed the value of 5 and can only be filled if Descontox2 is not empty."
  4. "Where Descontox4 cannot exceed the value of 3 and can only be filled if Descontox3 is not empty."
  5. "Where Descontox5 cannot exceed the value of 2 and can only be filled if Descontox4 is not empty."

Remembering that the item can range from 1 to 999.

Could someone give an example of how to do this?

php javascript jquery html

  • Just create a validation in the form’s Submit by checking by class inputs, rather than using class=inputs for everyone, set a class for each group (no need to remove the inputs if use for something else, may have n classes, ex: class="inputs desconto1", class="inputs desconto2"

  • I think with jquery you can. You can form validations in the property rule itself. Try using http://jqueryvalidation.org/

2 answers

1


I see you have a standard of 5 inputs in each row tr one-table. You can create an object or array with the validation rules and then map these table rows with the validation result of each one.

The method you choose to show the user that missing data you 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 is 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: http://jsfiddle.net/yaoa3539/

  • interesting script, but there are other inputs on the same page, and I’m not able to make it work on Onsubmit...

  • @Robertovalentim gathers all the code into a jsFiddle so I can see and understand your code better. Have you seen my example? works as you wanted in the example?

  • I saw your example yes, it works when we give the refresh on the page, my problem is on Onsubmit... Follow reduced HTML code so you can understand better jsFiddle

  • @Robertovalentim ok, then you can use it like this: http://jsfiddle.net/yaoa3539/2/

  • The interesting thing is that in jsfiddle it is working... but when I try to put the same example with the 7 inputs that have per item ...

-1

Simple example of going through all form inputs with javascript WILL MAKE THE MISTAKE IF THERE IS ONE BLANK *I did not test but apparently saw no 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()
        }
    });
});

  • @Roberto-Valentim you imported the Jquery libraries to the page before testing?

  • Milrak, the more the question is not only to check if they are blank... is to scan all inputs by checking the criteria... may even be on the onkeyup to check at the time of typing...

  • Wave it makes $(this). val() you could pick up $(this). attr('id') and so know the id, as you said that home input is numbered 1,2,3. has how to make an if

  • $("#Form1 input"). each(Function(){ // counts errors $(this). val() == "" ? errors++ ""; //take the name Discount and keep only the numbers for easy identification with repeat & #Xa; if ($(this).attr('id') == "1"){ $(this). val() > "30" ? errors++ : ""; } Else if ($(this).attr('id') == "2"){ $(this). val() > "5" ? errors++ ""; } });

Browser other questions tagged php javascript jquery html

You are not signed in. Login or sign up in order to post.