Two-button form validation

1

I'm having trouble validating a form, but the way I'm trying, I do not know if it's possible, can anyone give me strength?

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

I tried calling this function in the onclick of the button I want to run the function, but then it ran the function, but regardless of the result, it performed the submit.

I should use pure javascript.

Could anyone help me?

Thank you 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, should enter the checa_formulario() function.

Now the button with value = 2 , when clicked, should not execute the checa_formulario() function, but should submit.

I'm calling the function inside the onsubmit in the form tag, since the two buttons should 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 this is the function:

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

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

    
asked by anonymous 01.08.2017 / 21:59

2 answers

0

Thank you all for the 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 the onsubmit from the tag <form> .

So, when you click on the button with value = 2 , which is already type submit , it gives submit . And when you click the button with value = 1 , which is of type button , it first enters the function and checks the textarea , if if is false, it performs submit

    
02.08.2017 / 16:39
1

1. Working with inputs

In the script, check the name of the button you clicked on, 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="https://pt.stackoverflow.com/">
	<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="https://pt.stackoverflow.com/" >
   <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>

You can replace these two lines

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

of the code above 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="https://pt.stackoverflow.com/" >
   <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

  • submit: The button sends the form data to the server.
  • button: The button has no default behavior. It may have client-side scripts associated with element events, which are triggered when the event occurs.
  • <button> - Mozilla Developer Network

        
    01.08.2017 / 23:32