Validate that multiple inputs are not empty

3

I have 20 inputs in my html and each input has a different id, so before sending the backend I get getElementById the value of each div so I repeat the getElementById 20 times and verify that it is different of empty , how can I obtain the values in a simpler way verifying that they are not empty?

    
asked by hubman 03.09.2018 в 05:36
source

3 answers

2

You can use the native HTML attributes by adding the required attribute to each input and if you are using ajax with jQuery you can use preventDefault to avoid the normal behavior of the submit being executed and have the benefits of the form how press enter to send the form and so on.

example:

$("#formulario").submit(event => {
  event.preventDefault();
  alert("formulario comprobado");

  // ejecutar ajax o cualquier cosa


})
<form id="formulario">

  <input type="text" required><br>
  <input type="email" required><br>
  <input type="number" required><br>

  <button type="submit">Enviar</button>

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
answered by 03.09.2018 / 06:18
source
2

It is not necessary to obtain the value in that way, since the browser can display a message natively, and can even specify a regular expression what type of data the input expects to receive:

The following example explains it best. Note, the required attribute in input

<form action="/action_page.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit" maxlenght="5">
</form>

The following example makes use of the pattern attribute, which allows you to specify the text format that your input should accept:

<form action="/action_page.php">
Country code: <input type="text" name="country_code" 
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>

This example forces the user to enter characters from A to Z, uppercase or lowercase, and at most 3.

As for the PHP file, instead of getting the value of each input one by one you can send them all, so, even if they are 10000 inputs, the code will always be sustainable.

In this example, a form with its inputs is sent in the form of an array:

    <form action="demoform.php" method="get">

        <input type="checkbox" name="como[]" id="como1" value="Web">
        <label for="como1">Una web</label>

        <input type="checkbox" name="como[]" id="como2" value="Google">
        <label for="como2">Google</label>

        <input type="checkbox" name="como[]" id="como3" value="Anuncio en prensa">
        <label for="como3">Anuncio en prensa</label>

        <input type="checkbox" name="como[]" id="como4" value="Anuncio en tv">
        <label for="como4">Anuncio en tv</label>

        <button type="submit">Enviar</button>

</form>

Note how each input belongs to the same array, this is necessary in order to receive the server-side values:

if ( !empty($_GET["como"]) && is_array($_GET["como"]) ) { 
    echo "<ul>";
    foreach ( $_GET["como"] as $como ) { 
            echo "<li>";
            echo $como; 
            echo "</li>"; 
     }
     echo "</ul>";
}

Using good practices like these in your projects will make them sustainable and scalable. I hope I have helped you,

Good luck!

    
answered by 03.09.2018 в 05:53
1

You can do it with JQuery

$("input").each(function(){
if($(this).val()==""){
alert("vacio");
return false;
}
});

With each one you go through them one by one and you validate or obtain the data

var arreglo=new Array();
$("input").each(function(){
    if($(this).val()!="") arreglo.push($(this).val());
    });

If you want to add the spaces by this method

var arreglo=new Array();
$("input").each(function(){
    if($.trim($(this).val())!="") arreglo.push($(this).val());
});

Greetings:)

    
answered by 03.09.2018 в 05:39