Validate the form without sending it

Navigation
1

I'm trying to validate a form to check if everything is at least populated. The problem is that I'm not submitting the form because I can not 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 do the validation and prevent it 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 it. Anyone have any ideas whatsoever?

    
asked by anonymous 16.01.2015 / 19:42

3 answers

1

If I understand what you need, one of the following examples 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><scripttype="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><scripttype="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>
    
17.01.2015 / 05:17
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.
});
    
16.01.2015 / 22:43
0

You can put the validation function in the onsubmit attribute of the 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 you return false the browser stops sending the form.

    
16.01.2015 / 20:02
List tables with specific column How to create a Thumbnail of an image that is saved in the DB?