Come farei per impedire l'aggiornamento della pagina premendo il pulsante di invio senza dati nei campi?

La convalida è impostata correttamente, tutti i campi diventano rossi ma la pagina viene immediatamente aggiornata. La mia conoscenza di JS è relativamente semplice.

In particolare, penso che la processForm()funzione in fondo sia "cattiva".

HTML

<form id="prospects_form" method="post">
    <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" />
    <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" />
    <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" />
    <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>

    <button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()">Send</button>
    <div id="form_validation">
        <span class="form_captcha_code"></span>
        <input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" />
    </div>
    <div class="clearfix"></div>
</form>

JS

$(document).ready(function() { 

// Add active class to inputs
$("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); });
$("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); });
// Remove active class from inputs (if empty)
$("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } });
$("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } });



///////////////////
// START VALIDATION
$("#prospects_form").ready(function() {

    // DEFINE GLOBAL VARIABLES
    var valName = $('#form_name'),
        valEmail = $("#form_email"),
        valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
        valMsg = $('#form_message'),
        valCaptcha = $('#form_captcha'),
        valCaptchaCode = $('.form_captcha_code');



    // Generate captcha
    function randomgen() {
        var rannumber = "";
        // Iterate through 1 to 9, 4 times
        for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); }
        // Apply captcha to element
        valCaptchaCode.html(rannumber);
    }
    randomgen();


    // CAPTCHA VALIDATION
    valCaptcha.blur(function() {
        function formCaptcha() {
            if ( valCaptcha.val() == valCaptchaCode.html() ) {
                // Incorrect
                valCaptcha.parent().addClass("invalid");
                return false;
            } else {
                // Correct
                valCaptcha.parent().removeClass("invalid");
                return true;
            }
        }
        formCaptcha();
    });

    // Remove invalid class from captcha if typing
    valCaptcha.keypress(function() {
        valCaptcha.parent().removeClass("invalid");
    });


    // EMAIL VALIDATION (BLUR)
    valEmail.blur(function() {
        function formEmail() {
            if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmail();
    });

    // Remove invalid class from email if typing
    valEmail.keypress(function() {
        valEmail.removeClass("invalid");
    });


    // VALIDATION ON SUBMIT
    $('#prospects_form').submit(function() {
        console.log('user hit send button');

        // EMAIL VALIDATION (SUBMIT)
        function formEmailSubmit() {
            if (!valEmailFormat.test(valEmail.val())) {
                // Incorrect
                valEmail.addClass("invalid");
            } else {
                // Correct
                valEmail.removeClass("invalid");
            }
        }
        formEmailSubmit();

        // Validate captcha
        function formCaptchaSubmit() {
            if( valCaptcha.val() === valCaptchaCode.html() ) {
                // Captcha is correct
            } else {
                // Captcha is incorrect
                valCaptcha.parent().addClass("invalid");
                randomgen();
            }
        }
        formCaptchaSubmit();


        // If NAME field is empty
        function formNameSubmit() {
            if ( valName.val() === "" ) {
                // Name is empty
                valName.addClass("invalid");
            } else {
                valName.removeClass("invalid");
            }
        }
        formNameSubmit();


        // If MESSAGE field is empty
        function formMessageSubmit() {
            if ( valMsg.val() === "" ) {
                // Name is empty
                valMsg.addClass("invalid");
            } else {
                valMsg.removeClass("invalid");
            }
        }
        formMessageSubmit();


        // Submit form (if all good)
        function processForm() {
            if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) {
                $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php");
                $("#form_send").attr("type", "submit");
                return true;
            } else if( !formEmailSubmit() ) {
                valEmail.addClass("invalid");
                return false;
            } else if ( !formCaptchaSubmit() ) {
                valCaptcha.parent().addClass("invalid");
                return false;
            } else if ( !formNameSubmit() ) {
                valName.addClass("invalid");
                    return false;
                } else if ( !formMessageSubmit() ) {
                    valMsg.addClass("invalid");
                    return false;
                } else {
                    return false;
                }
            }
        });
    });
    // END VALIDATION
    /////////////////
});

È possibile impedire l'invio del modulo con

$("#prospects_form").submit(function(e) {
    e.preventDefault();
});

Naturalmente, nella funzione, puoi verificare la presenza di campi vuoti e, se qualcosa non sembra corretto, e.preventDefault()interromperà l'invio.

Senza jQuery:

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

Aggiungi questo codice onsubmit = "return false":

<form name="formname" onsubmit="return false">

Ciò ha risolto il problema per me. Eseguirà comunque la funzione onClick specificata

Sostituisci il tipo di pulsante in button:

<button type="button">My Cool Button</button>

È possibile utilizzare questo codice per l'invio del modulo senza un aggiornamento della pagina. L'ho fatto nel mio progetto.

$(function () {
    $('#myFormName').on('submit',function (e) {

              $.ajax({
                type: 'post',
                url: 'myPageName.php',
                data: $('#myFormName').serialize(),
                success: function () {
                 alert("Email has been sent!");
                }
              });
          e.preventDefault();
        });
});

Un ottimo modo per evitare di ricaricare la pagina quando si invia utilizzando un modulo è aggiungendo return falsecon l'attributo onsubmit.

<form action="#" onsubmit="yourJsFunction();return false">
    <input type="text"/>
    <input type="submit"/>
</form>

Questo problema diventa più complesso quando si danno all'utente 2 possibilità di inviare il modulo:

1. facendo clic su un pulsante ad hoc
2. premendo il tasto Invio

In tal caso, avrai bisogno di una funzione che rilevi il tasto premuto in cui invierai il modulo se il tasto Invio è stato premuto.

E ora arriva il problema con IE (in ogni caso versione 11) Nota: questo problema non esiste con Chrome né con FireFox!

• Quando si fa clic sul pulsante di invio, il modulo viene inviato una volta; bene.
• Quando premi Invio, il modulo viene inviato due volte ... e il tuo servlet verrà eseguito due volte. Se non si dispone di server con architettura PRG (post reindirizzamento) sul lato, il risultato potrebbe essere imprevisto.

Anche se la soluzione sembra banale, mi ci sono volute molte ore per risolvere questo problema, quindi spero che possa essere utile per altre persone. Questa soluzione è stata testata con successo, tra l'altro, su IE (v 11.0.9600.18426), FF (v 40.03) e Chrome (v 53.02785.143 m 64 bit)

Il codice sorgente HTML & js sono nello snippet. Il principio è descritto lì. Avvertimento:

Non puoi provarlo nello snippet perché l'azione post non è definita e premere il tasto Invio potrebbe interferire con lo stackoverflow.

Se hai riscontrato questo problema, copia e incolla il codice js nel tuo ambiente e adattalo al tuo contesto.

/*
 * inForm points to the form
 */
var inForm = document.getElementById('idGetUserFrm');
/*
 * IE submits the form twice
 * To avoid this the boolean isSumbitted is:
 *  1) initialized to false when the form is displayed 4 the first time
 * Remark: it is not the same event as "body load"
 */
var isSumbitted = false;

function checkEnter(e) {
  if (e && e.keyCode == 13) {
    inForm.submit();
    /*
      * 2) set to true after the form submission was invoked
      */
    isSumbitted = true;
  }
}
function onSubmit () {
  if (isSumbitted) {
    /*
    * 3) reset to false after the form submission executed
    */
    isSumbitted = false;
    return false;
  }
}

<!DOCTYPE html>
<html>
<body>

<form id="idGetUserFrm" method="post" action="servletOrSomePhp" onsubmit="return onSubmit()">
   First name:<br>
   <input type="text" name="firstname" value="Mickey">
   <input type="submit" value="Submit">
</form>

</body>
</html>

In Javascript puro, utilizzare: e.preventDefault()

e.preventDefault() è usato in jquery ma funziona in javascript.

document.querySelector(".buttonclick").addEventListener("click", 
function(e){

  //some code

  e.preventDefault();
})

La maggior parte delle persone impedirebbe l'invio del modulo chiamando la event.preventDefault()funzione.

Un altro mezzo è rimuovere l'attributo onclick del pulsante e ottenere il codice processForm()in .submit(function() {quanto return false;causa il mancato invio del modulo. Inoltre, rendere le formBlaSubmit()funzioni di ritorno booleano in base alla validità, per l'uso inprocessForm();

katshLa risposta è la stessa, semplicemente più facile da digerire.

(A proposito, sono nuovo di StackOverflow, dammi una guida per favore.)

La soluzione migliore è onsubmit chiamare qualsiasi funzione come vuoi e restituire false dopo di essa.

onsubmit="xxx_xxx(); return false;"

Personalmente mi piace convalidare il modulo al momento dell'invio e, in caso di errori, restituire false.

$('form').submit(function() {

    var error;

   if ( !$('input').val() ) {
        error = true
    }

    if (error) {
         alert('there are errors')
         return false
    }

});

http://jsfiddle.net/dfyXY/

 $("#buttonID").click(function (e) {
          e.preventDefault();
         //some logic here
 }

Se desideri utilizzare Pure Javascript, il seguente frammento sarà migliore di ogni altra cosa.

Supponiamo che :

HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Form Without Submiting With Pure JS</title>
        <script type="text/javascript">
            window.onload = function(){
                /**
                 * Just Make sure to return false so that your request will not go the server script
                 */
                document.getElementById('simple_form').onsubmit = function(){
                    // After doing your logic that you want to do 

                    return false 
                }
            }
        </script>
    </head>
    <body>

    </body>
</html>
<form id="simple_form" method="post">
    <!-- Your Inputs will go here  -->
    <input type="submit" value="Submit Me!!" />
</form>

Spero che funzioni per te !!

function ajax_form(selector, obj)
{

    var form = document.querySelectorAll(selector);

    if(obj)
    {

        var before = obj.before ? obj.before : function(){return true;};

        var $success = obj.success ? obj.success: function(){return true;};

        for (var i = 0; i < form.length; i++)
        {

            var url = form[i].hasAttribute('action') ? form[i].getAttribute('action') : window.location;

            var $form = form[i];

            form[i].submit = function()
            {

                var xhttp = new XMLHttpRequest();

                xhttp.open("POST", url, true);

                var FD = new FormData($form);

                /** prevent submiting twice */
                if($form.disable === true)

                    return this;

                $form.disable = true;

                if(before() === false)

                    return;

                xhttp.addEventListener('load', function()
                {

                    $form.disable = false;

                    return $success(JSON.parse(this.response));

                });

                xhttp.send(FD);

            }
        }
    }

    return form;
}

Non ho controllato come funziona. Puoi anche associare (questo) in modo che funzioni come jquery ajaxForm

usalo come:

ajax_form('form',
{
    before: function()
    {
        alert('submiting form');
        // if return false form shouldn't be submitted
    },
    success:function(data)
    {
        console.log(data)
    }
}
)[0].submit();

restituisce nodi in modo da poter fare qualcosa come inviare l'esempio sopra

così lontano dalla perfezione ma supponiamo che funzioni, è necessario aggiungere la gestione degli errori o rimuovere la condizione di disabilitazione

Usa "javascript:" nel tuo attributo action del modulo se non stai usando action.

A volte e.preventDefault (); funziona quindi gli sviluppatori sono felici ma a volte non funzionano quindi gli sviluppatori sono tristi quindi ho trovato la soluzione perché a volte non funziona

il primo codice a volte funziona

$("#prospects_form").submit(function(e) {
    e.preventDefault();
});

seconda opzione perché non funziona? Questo non funziona perché jquery o altra libreria javascript non si caricano correttamente, è possibile verificare nella console che tutti i file jquery e javascript siano caricati correttamente o meno.

Questo risolve il mio problema. Spero che questo possa esserti utile.

Secondo me, la maggior parte delle risposte sta cercando di risolvere il problema posto sulla tua domanda, ma non credo sia l'approccio migliore per il tuo scenario.

Come farei per impedire l'aggiornamento della pagina premendo il pulsante di invio senza dati nei campi?

A in .preventDefault()effetti non aggiorna la pagina. Ma penso che un semplice requiresui campi che desideri popolato di dati risolva il tuo problema.

<form id="prospects_form" method="post">
    <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" required/>
    <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" required/>
    <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" required/>
    <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
</form>

Si noti il requiretag aggiunto alla fine di ciascuno input. Il risultato sarà lo stesso: non aggiornare la pagina senza dati nei campi.

Spero che questa sia l'ultima risposta

$('#the_form').submit(function(e){
  e.preventDefault()
  alert($(this).serialize())
  // var values = $(this).serialize()
  // logic....
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="the_form">
   Label-A <input type="text" name='a'required><br>
   Label-B <input type="text" name="b" required><br>
   Label-C <input type="password" name="c" required><br>
   Label-D <input type="number" name="d" required><br>
   <input type="submit" value="Save without refresh">
</form>

 Run code snippetHide results
Expand snippet

Per JavaScript puro utilizzare invece il metodo click

<div id="loginForm">
    <ul class="sign-in-form">
        <li><input type="text" name="username"/></li>
        <li><input type="password" name="password"/></li>
        <li>
            <input type="submit" onclick="loginForm()" value="click" />
        </li>
    </ul>
</div>

<script>
function loginForm() {
    document.getElementById("loginForm").click();
}
</script>

Ho appena trovato una soluzione molto semplice ma funzionante, rimuovendo <form></form>dalla sezione che volevo impedire la pubblicazione e l'aggiornamento.

<select id="youId" name="yourName">
<select> 
<option value="1</option>
<option value="2</option>
<option value="3</option>
</select>
<input id="formStockVal1" type="number"><br><br>
<form> 
<button type="reset" id="stockCancel">Cancel</button>
<button type="reset" id="stockConfirm">Add</button>
</form>

Qui solo i pulsanti vengono inviati come dovrebbero.

Basta inserire il ritorno in questo modo:

function validate()
{

  var username=document.getElementById('username').value;
  
	  if(username=="")
	  {
		return false;	
	  }
	  if(username.length<5&&username.length<15)
	  {
	  	alert("Length should between 5 to 15 characters");
	  	return false;
	  }
	  
	  return true;
}

body{
	padding: 0px;
	margin:0px;
}

input{
	display: block;
	margin-bottom:10px;
	height:25px;
	width:200px;
}

input[type="submit"]{
	margin:auto;
}

label{
	display:block;
	margin-bottom:10px;
}

form{
		width:500px;
		height:500px;
		border:1px solid green;
		padding:10px;
		margin:auto;
		top:0;
		bottom:0;
		left:0;
		right:0;
		position:absolute;		
}

.labels{
	width: 35%;
	box-sizing:border-box;
	display: inline-block;
}

.inputs{
	width: 63%;
	box-sizing:border-box;
	padding:10px;
	display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FORM VALIDATION</title>
	<link rel="stylesheet" type="text/css" href="style.css">

	<script type="text/javascript" src="script.js"></script>
</head>

<body>
	<form action="#">
		<div class="labels">
			<label>Name</label>
			<label>Email</label>
		</div>

		<div class="inputs">
			<input type="text" name="username" id="username" required>
			<input type="text" name="email" id="email" required>
		</div>
		
		<input type="submit" value="submit" onclick="return validate();">
	</form>
</body>

</html>

Restituisce true e false da validate (); funzione secondo il requisito