Form validation with two buttons

Question

I’m having trouble validating a form, but the way I’m trying I don’t know if it’s possible, someone can give me a strength?

I have a form with two buttons submit. And on the tag form I’m putting the onsubmit = "checa_formulario()" However, one of the buttons should perform Submit without entering this function of onsubmit, but the other button should perform this function.

I tried to call this function on onclick of the button I want to execute the function, but then it executed the function, but regardless of the result, it performed Submit.

I must use pure javascript.

Could someone help me?

Thanks in advance!

EDIT

I have two buttons:

<button type="submit" name="submit" value="1">
<button type="submit" name="submit" value="2">

The button with value = 1, when clicked, must enter the function checa_formulario().

Already the button with value = 2, when clicked, should not perform the function checa_formulario(), but must perform Submit.

I’m calling the function inside the onsubmit in the form tag, since the two buttons must perform Submit, the difference between one and the other, is that, one does validation and the other does not.

<form method="POST" action="arquivo.php" onsubmit="return checa_formulario()">

And that’s the job:

if (document.getElementById('descri_icon').value.length < 10) {
    alert("Erro");
    return (false);
}

This id, descri_icon is of a textarea, and the only check is to see if in it, has the minimum of requested characters, but this, if the button with value = 1 is clicked.

Answer 1

1. Working with inputs

In the script check the name of the button clicked, and the buttons onclick="checa_formulario(this.name,this.form)"

function checa_formulario(NomeBotao,form){
if(NomeBotao == "bt1"){
    if (document.getElementById('descri_icon').value.length < 10) { 
        alert("Erro");
        return false;
    }
}
form.submit();
}

<form method="POST" action="/">
	<textarea id="descri_icon" name="descri_icon"></textarea>
	<input type="button" name="bt1" value="1" onclick="checa_formulario(this.name,this.form)">
	<input type="button" name="bt2" value="2" onclick="checa_formulario(this.name,this.form)">
</form>

2. Working with <button>

function checa_formulario()
{
   if (document.getElementById('descri_icon').value.length < 10) { 
	  alert("Erro");
	  return false;
   }    
document.getElementById('myform').submit();
}

var btn = document.getElementById("btn");
btn.addEventListener("click", checa_formulario);

<form id="myform" method="POST" action="/" >
   <textarea id="descri_icon" name="descri_icon"></textarea>
   <button type="button" id="btn" value="1">1</button>
   <button type="submit" id="btn2" value="2">2</button>
</form>

These two lines can be replaced

var btn = document.getElementById("btn"); btn.addEventListener("click", checa_formulario);

of the above code by the event

onclick="checa_formulario()"

directly on the button

function checa_formulario()
{
   if (document.getElementById('descri_icon').value.length < 10) { 
	  alert("Erro");
	  return false;
   }    
document.getElementById('myform').submit();
}

<form id="myform" method="POST" action="/" >
   <textarea id="descri_icon" name="descri_icon"></textarea>
   <button type="button" id="btn" value="1" onclick="checa_formulario()">1</button>
   <button type="submit" id="btn2" value="2">2</button>
</form>

About the type attribute of Buttons

1. Submit: The button sends the form data to the server.
2. button: The button has no default behavior. It may have client-side scripts associated with element events, in which they are triggered when the event occurs.

<button> - Mozilla Developer Network

Answer 2

Thank you all for your help!

I solved it as follows:

<!-- Botões -->
<button type="button" name="btnComValidacao" value="1" 
onclick="checa_formulario()">
<button type="submit" name="btnSemValidacao" value="2">

And the function checa_formulario()

function checa_formulario(){
                if (document.getElementById('descri_icon').value.length < 10){
                  alert("erro");
                  return (false);
                } else {
                    document.getElementById('form').submit();
                }
        }

And I took onsubmit off the tag <form>.

So when clicked on the button with value = 2, who is already of the type submit, he gives the submit. And when clicked on the button with value = 1, who’s kind button, he first enters the function and checks the textarea, if the if der false, it performs the submit