Validate the form without sending it

Asked

Viewed 1,117 times

1

I’m trying to validate a form to verify that everything is at least filled out. The problem is that I am not submitting the form as I cannot reload the page. I’m just capturing the event by Javascript and performing the function.

Follow the code below:

$('#nitrogenio').click(function (e) {
if($("#commentForm").validate(){
var combo=$('#haoum3').val();
var area=$('#area4').val();
var resultado;
if ( combo=="ha" ) {
        resultado = 10*Number(area);
        $("#divPrincipal4").html('<p class="alert-success">Irá precisar de '+ (Number(resultado)-Number(10)) +'-'+ resultado + ' Kg de Nitrogênio </p>');
     }
     else
     {
        resultado = 10*(area/Number(10000));
        $("#divPrincipal4").html('<p class="alert-success">Irá precisar de '+ (Number(resultado)-Number(10)) +'-'+ resultado + ' Kg de Nitrogênio </p>');
     }
 }

  });

To validate and prevent you from doing the function if it is empty I put a

if($("#commentForm").validate()

The idea even worked, but the problem is that when everything is correct with the form, it sends the page and reloads. Does anyone have any idea what it is?

javascript jquery html

  • What HTML element is the #nitrogenio? <button>? <input>?

  • What do you mean, "reload" ?

3 answers

1

if it is that I understood what you need, one of these examples below will serve:

<html>
<head>
<title>Validando formulários e previnindo o envio se não for aprovado na validação</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(function()
{
	$("#commentForm").submit(function()
	{
		var combo=$('#haoum3').val(),
		area=$('#area4').val(),
		resultado;
		if(combo == "ha")
		{
			resultado = 10*Number(area);
			$("#divPrincipal4").html('<p class="alert-success">Irá precisar de '+ (Number(resultado)-Number(10)) +'-'+ resultado + ' Kg de Nitrogênio </p>');
			alert("o form vai ser enviado");
			return true;	// NÃO PREVINE o envio do formulário
		}
		else
		{
			resultado = 10*(area/Number(10000));
			$("#divPrincipal4").html('<p class="alert-success">Irá precisar de '+ (Number(resultado)-Number(10)) +'-'+ resultado + ' Kg de Nitrogênio </p>');
			alert("o form não vai ser enviado");
			return false;	// PREVINE o envio do formulário
		}
	});
});
</script>
</head>
<body>
	<div id="divPrincipal4"></div>
	<form id="commentForm" action="valida.php" method="POST">
		<select onchange="if($(this).val() == 'ha'){$('#area4').val(0.4);}else{if($(this).val() == 'cl'){$('#area4').val(0.8);}else{$('#area4').val(0.1);}}" id="haoum3">
			<option>Selecione</option>
			<option>ha</option>
			<option>cl</option>
		</select>
		<input type="text" name="area4" id="area4" />
		<input type="submit" id="nitrogenio" value="Validação" />
	</form>
</body>
</html>

or:

<html>
<head>
<title>Validando formulários e previnindo o envio sempre</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(function()
{
	$("#commentForm").submit(function()
	{
		var combo=$('#haoum3').val(),
		area=$('#area4').val(),
		resultado;
		if(combo=="ha")
		{
			resultado = 10*Number(area);
			$("#divPrincipal4").html('<p class="alert-success">Irá precisar de '+ (Number(resultado)-Number(10)) +'-'+ resultado + ' Kg de Nitrogênio </p>');
		}
		else
		{
			resultado = 10*(area/Number(10000));
			$("#divPrincipal4").html('<p class="alert-success">Irá precisar de '+ (Number(resultado)-Number(10)) +'-'+ resultado + ' Kg de Nitrogênio </p>');
		}
		alert("o form não vai ser enviado");
		return false;	// PREVINE o envio do formulário
	});
});
</script>
</head>
<body>
	<div id="divPrincipal4"></div>
	<form id="commentForm" action="valida.php" method="POST">
		<select onchange="if($(this).val() == 'ha'){$('#area4').val(0.4);}else{if($(this).val() == 'cl'){$('#area4').val(0.8);}else{$('#area4').val(0.1);}}" id="haoum3">
			<option>Selecione</option>
			<option>ha</option>
			<option>cl</option>
		</select>
		<input type="text" name="area4" id="area4" />
		<input type="submit" id="nitrogenio" value="Validação" />
	</form>
</body>
</html>

0

You can put the validation function in the attribute onsubmit form.

<form ... onsubmit="return validarFormulario();">
</form>

function validarFormulario() {
    var possuiErro = false;
    // condicoes

    return possuiErro;
}

With this, if your validation function returns true the form is sent and if return false the browser stops sending the form.

0

$('#nitrogenio').click(function (e) {
    if($("#commentForm").validate() {
        var combo = $('#haoum3').val();
        var area = $('#area4').val();
        var resultado;
        if (combo == "ha") {
            resultado = 10 * Number(area);
        }
        else
        {
            resultado = 10 * (area / Number(10000));
        }
        $("#divPrincipal4").html('<p class="alert-success">Irá precisar de ' + (Number(resultado) - Number(10)) + '-' + resultado + ' Kg de Nitrogênio </p>');
    }
    e.preventDefault(); // Assim evita o comportamento padrão do browser de recarregar a página.
});

Browser other questions tagged javascript jquery html

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