We Keep Coding

JavaScript validation does not stop submission to php script

I want to validate my code with javaScript and determine if it is okay to submit to php.
If it is correct I want the form to not submit to the php file that I have in 'action'.
If it is inncorrect I do not want the form to submit to the php file, and I want to display an error message.
Right now the form uses "onsubmit="return Validate()"" to call the validation function which displays a message and returns false to stop the form action. The problem is that the form action does not get stopped, and still runs. For some reason when I click the submit button twice the php message gets displayed then the java script message gets displayed.
My html form:
<form action="<?= base_Url(); ?>index.php/Login/loginuser" onsubmit="return Validate();" method="post" name="Login" accept-charset= "utf-8" >
Username: <input type="text" name="Username" maxlength="21" />
<br><br>
Password: <input type="text" name ="password" maxlength="20" />
<br><br>
<input type = "submit" value = "Login" class = "loginbutton" />
</form>
My java script function.
function Validate() {
document.getElementById("errorMSG").innerHTML = "Validate ran...";
return false;
}
From what I read online when onsubmit="return Validate()" gets returned false the form is supposed to not run. Thought this was right but cant figure out why its not working.
EDIT: I am useing codeigniter to display the url, and for other purposes on the project.
EDIT2: This is still not working... When the onsubmit is changed too, onsubmit="false" the php will not be called. Which is expected. When changed to onsubmit="true", the php will be called. Which is expected.
When onsubmit="return Validate();" and the Validation() function on says "return false;". It will for as expected. Same with return true. But when code gets placed in the function the boolean does not appear to be returned. The code below will not stop the php file from running when the login name is empty.
function Validate() {
if (document.getElementsByName("Username")=="" )
{
document.getElementById("errorMSG").innerHTML = "Validate ran...";
return false;
}
else
{
return true;
}
}
I am testing with chrome and firefox. There are no error messages displayed in the console on google chrome. I am not familiar with the debug tool for fire fox but i see no error messages displayed either.
I am now going to change the jquery script line to an updated version, maybe it will help..
I am using code igniter with controllers, views, libraries...
Everything was working fine until i started with the javascript validation.

You should use return false only when mandatory fields are empty
function Validate() {
// check whether mandatory fileds have some value or not
// document.getElementsByName("Username") always returns an array and will be robust way to access value by index 0 iin array like - document.getElementsByName("Username")[0]
if(document.getElementsByName("Username")[0].value == "" || document.getElementsByName("password")[0].value)
{
document.getElementById("errorMSG").innerHTML = "All fields required";
return false;
}
return true;
}

Please try this one 100% work
onsubmit="myFunction();return false;"

1.It should be just "Validate()" for onsubmit, not "return Validate().
And use onclick instead of onsubmit
Try this
<input type = "submit" value = "Login" class = "loginbutton" onclick = "Validate()"/>

Submitting a form without page refresh

I realize that Ajax is the recognized way to submit a form without page refresh but to do that involves cycling through each field and constructing the Post string to submit.
Is there not some alternative way to use the browsers built-in functionality to submit the form but intercept the returned html to stop the page being refreshed?
Edit:
Not the same as the suggested duplicate which asks about form validation: "I am wanting to run javascript user validation"
Edit2:
The primary problem is how to stop the servers response to the submit from navigating to a new page. Is there something the server could respond with which would stop the whole page getting refreshed?
Edit3:
What about returning an http 204 response:
Server has received the request but there is no information to send back, and the client should stay in the same document view. This is mainly to allow input for scripts without changing the document at the same time

yes there is.. the idea is to have the form action and the onsubmit event handled
consider the code below:
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
at this point you are intercepting the call to ensure that the form is valid. if everything passes than a page refresh will trigger. If you want the refresh not to occur you need to handle the post via ajax where you will need to rebuild the entire call. hope this will help you out.. cheers
a simple way to do it, if you are using jquery is to serialize the data using the
http://api.jquery.com/serialize/ functionality
one way to do this is if you are using jQuery:
<form id="myForm" name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
var url = $('#myForm').attr('action');
var data = $('#myForm').serialize();
$.post(url, data);
}

Stopping a refresh/redirect on form submission

I have an app that wants to redirect after submitting and I would like to freeze it after clicking submit. The app is a multiform that has an end slide that I would like the animation to trigger and then freeze it from redirect/refresh.
<form id="form" class="msform hs-form stacked hs-custom-form" accept-charset="UTF-8"
action="confidential-url" enctype="multipart/form-data" method="POST" novalidate="">
<!-- form stuff -->
</form>
$(".submit").click(function () {
return true;
e.preventDefault();
});
I have tried adding onSubmit="return false" to my <form> tag as well as various e.preventDefault(); methods. All of them will either:
• Cause it to prevent the redirect/refresh but not update the fields in the DB
• Update fields but page will still redirect
EDIT:
After trying to do this in AJAX I found out that I was being blocked out from the external URL, thanks to to r4phG for helping me figure it out!

Is your submission causing your redirection/ refresh ?
If you have to submit your form to update fields in your database, you'll have to submit your form. But if you don't want to refresh all your page, you should think of using Ajax, as your submission will not refresh your page
Example from jquery ajax doc :
$("#form").submit(function() {
$.ajax({
url:'confidential-url',
method:'POST' ,
data:$(this).serialize() //submits your form information
});
return false; // prevent the server form submission
});
jQuery ajax documentation

Javascript How to use Confirm Dialog Box onSubmit with two submit buttons on JSP

My form currently has two submit buttons. One for Search and the other for a Mark Complete function. I need to show a confirm dialog box ONLY when the "Mark Complete" button is clicked to submit the form with that validation is passed. Is it possible to identify this? I currently have the below confirmComplete function:
function confirmComplete() {
alert("confirmComplete");
var answer=confirm("Are you sure you want to continue");
if (answer==true)
{
return true;
}
else
{
return false;
}
}
Any help would be appreciated!

Set the onclick attribute of the "Mark Complete" button to this
onclick="return confirm('Are you sure you want to continue')"
and remove the confirmComplete function from the form

You can. You can put your buttons like this
<input type="submit" value="Search" />
<input type="submit" value="Mark Complete" onclick="{return confirmComplete();}" />
When Mark Complete button is clicked then the confirmComplete function will be called and when user says OK in the confirm dialog then only the form will be submitted.

You need to do the event from the click on the button and not the form submission. There is no crossbrowser way to know what submitted the form.

So here is a bypass solution:
<form id="frm" action="page.php" method="post" onsubmit="return onSubmit();">
<input />
<input type="submit" value="sub1" onclick="sub1();" />
<input type="submit" value="sub2" onclick="sub1();" />
</form>
<script type="text/javascript">
<!--
var frm = document.getElementById('frm');
function onSubmit(){
return false;
}
function sub1(){
alert('s1');
frm.submit();
}
function sub2(){
alert('s2');
}
//-->
</script>

when you call "confirm()" javascript pop up function , like onclick="return confirm('Are you sure to proceed?')" ,confirm box get appear with message 'Are you sure to proceed?' with two options 'ok' and 'cancel'.when you click ok it return true and proceed further execution of web page or if you click cancel it will return false and stop further execution of web page.

I don't know for an input tag, but it didn't worked for me with the click event directly on a button. In my case, the form was posted right away.
Here's a possible solution for a form with many buttons (for which only one of them must display the confirmation message)
In the view:
<FORM name="F_DESTINATION_DB" id="F_DESTINATION_DB" method="POST" onsubmit="return popConfirmationBox('<?php echo LanguageControler::getGeneralTranslation("DELETE_CONFIRMATION_MESSAGE", "Deleting is an irreversible action. Are you sure that you want to proceed to the deleting?");?> ','DELETE_DB_BUTTON')">
Javascript (in external file for code reuse):
/**
* Display a confirmation message box to validate if we must post the page or not.
*
* #param message String to display
* #param tagId String id of the tag that must display the message.
*
* #return Boolean (confirmation)
*/
function popConfirmationBox(message, tagId){
var confirmation = true;
if (typeof tagId === 'string' && document.activeElement.id.toUpperCase() === tagId.toUpperCase()) {
if (typeof message === 'string' && message.length > 0) {
confirmation = window.confirm(message);
}
}
return confirmation;
}
I had quite a hard time to achieve this (needed lot of research and testing), but the resulting code is pretty simple.
By default, I assume that the confirmation is yes (in case the clicked button is not the one meant to display the message or if the user doesn't supply a valid message string).
Additional note: Of course, this code won't do the trick if the user browser block client side code.
I hope it will help someone,
Jonathan Parent-Lévesque from Montreal

html submit pressed and refresh

i've got a webpage with a form that has a dropdown selection and a submit button. the page also has a auto refresh function (every 10 secs) to retrieve and display the latest information from the server. when the submit button is clicked, a confirm alert popups with a yes/no option. user then select yes to submit the information to the server. the submission to server works
if the submit is clicked at the same time as the refresh occurred, the confirm dialog box popup but the form information is not submitted. is the confirm box still tied to the form?
here is my code. it may not be exactly the same because im my codes are offline but the geess is
<html>
<head>
<script type="text/javascript">
function confirmSubmit(message)
{
var ans = confirm(message);
if (ans == true)
{
return true;
}
else
{
return false
}
} //end of function
</script>
</head>
<body>
<form name="myForm" method="GET" action="GET">
<input type="submit" name="btnSubmit" value="submit" onclick="javascript:confirmSubmit()" />
</form>
</body>
</html>

The best thing would be to get rid of the auto refreshing so you don't have to worry about the form not being submitted. use AJAX instead to get new information that needs to be updated, this way the page doesn't need to refresh.
If for whatever reason you don't want to remove the auto-refreshing, what I would do is:
where ever you do the auto refreshing, check if the dropdown/form is being shown, and if it is, don't auto refresh.