We Keep Coding

Allow HTML form validation but stop submit once complete

I know a way to stop a form from submitting, but i have a on click event to the submit button and its firing even though the form doesnt pass the HTML validation.
<form id="signupform" class="signupform" onsubmit="(e)=>{e.preventDefault()};return false">
</form>
My goal is to stop the page refresh either way (if it validates or not) but still allow the built in validation to run first.
Any suggestions?

A submit button's job is to trigger the submit event of a form. Therefore, with form elements, you don't set up click events on the submit button, you set up submit event handlers on the form.
Then, to introduce validation into the mix, you can stop the native submit to take place in the handler, only if validation fails. This is done by accessing the event argument that is automatically sent to every DOM event handler* (see next paragraph for caveat). You can use the event.preventDefault() method to stop the native event from taking place.
*One final note, the use of inline HTML event handling attributes such as onsubmit and onclick is to be avoided. This is a 25+ year old technique that we used before we had standards and unfortunately, because they seem easy to use, they get copied by new developers who don't know any better. There are real reasons not to use them and you've stumbled into one. Your e argument to your event handling function is not being populated with a reference to the event like you think it is. That only happens when you use the modern standard way of setting up event callbacks, which is .addEventListener().
// Set up a submit event handler for the form
// not a click event handler for the button because
// clicking a submit button triggers the form's submit event
document.querySelector("form").addEventListener("submit", function(event){
if(document.querySelector("input").value === ""){
// Invalid data! Stop the submit!
event.preventDefault();
alert("Please fill in all fields!");
return;
}
// If the code reaches this point, validation succeeded
console.log("Form submitted");
});
<form action="https://example.com" method="post">
<input>
<button>Submit</button>
</form>

Javascript bind submit event

I'm trying to bind an submit event to a button that can't be type="submit" needs to be type="button"
I'm trying these to make the required attr validation works
So, can you say what I'm doing wrong here? I'm Googling a lot but didn't find anything yet.
https://jsfiddle.net/2gfnqv6e/28/

With this code, you can trigger the submit event :
submitBtn.addEventListener('click', function () {
form.dispatchEvent(submitEvent);
});
However the HTML5 form validation won't work because it requires an actual submit button.
Updated JSFiddle

Submit form using a tag and make onsubmit work

hello i want to know how to submit form using a tag i know it is
but when i try javascript validation on form eg
<form method="post" onsubmit="valid() name="myform" action="index.php">
then the valid function doesn't work so is there any way to make the function work.
I want only a tag to be used as onsubmit.
i used simple alert function for checking the validation but it doesnot worked but when i checked it using input type submit tag then it started working.

Your onclick() function is looking for a form with the ID myform. In your example code, your form doesn't have an ID or name.
This code should work:
So long as you include the ID in the form element:
<form method="post" onsubmit="valid()" name="myform" id="myform">

Historically, form submission via submit() JavaScript method does not invoke submit event handler (most likely to prevent infinite recursion).
If you want to call a code that is contained inside onsubmit attribute, you should call it explicitly before submitting form programmatically. For example:
var form = document.querySelector('form'),
link = document.querySelector('a');
link.onclick = function() {
alert('Handler attached with JS.');
form.onsubmit.call(form);
form.submit();
return false;
};

The answer is simple - submit() method does not trigger onsubmit event. If you want to validate your code on submit then you have to call valid() function by yourself.
Example:
which will trigger your onsubmit (so it will call valid())
or just:
submit() method can be then called from that function after positive validation or whenever you want.

I know that the question is really old. But if someone actually needs a solution
i.e. in case when one wants required fields to be validated by the browser.
Inside of the form create an
<input type="submit" name="submit" />
And the click on the link should actually trigger the click on that submit input:

when form submit ,the order of click function and submit

about click and submit
example below:
<form action="url" method="post">
<input type="text" id="input1"/>
<input type="submit" value="submit" onclick="testFun()"/>
</form>
if it is possible that function testFun run after the form's submit when we click the button to submit
if the answser is no.
why? how does the browser work when click the submit button?? the order is click function-> submit ? is right??

No you cannot execute a function after the form has been submitted - the order of which things are executed is as follows :
User clicks the submit button
The onclick function is executed
The browser submits the page to the url specified in the action of the form
You can prevent the browser submitting the page by returning false from the onclick handler :
function myfunc() {
// do some stuff
return false;
}
the submit button should then be modified like this :
<input type="submit" onclick="return myfunc()"/>
If you do wish to execute a function after the form has been submitted you need to submit the form using AJAX - this doesnt cause the browser to navigate away from the page and a JavaScript function can be executed after the form has been submitted

This is not possible because the form's action would redirect the browser to that URL.
1 option would be to run testFun() on your action url page, but this might not be possible depending on what the function does.
If you are to post more information about what you are actually trying to do here, then it might help.

No, but testFun might (in turn) call another, asynchronous, function that wouldn't run until the form had submitted (at which point it wouldn't run at all since the browser would have left the page).

No it is not possible, after submit you are out of the scope from the current page. But if you are using an iframe for your form submit and call the function on the parent page, then I thought it will work.

The anwswer is "It is not possible"
Why
Because once the browser triggers the submit event all user interaction with page is stopped. After the submit event is triggered the communication is between your browser and the webserver. This is how broswers are designed.
In your case Form submission happens because you have a form in your page and in that form you have an input of type=button. If you dont want to submit the page you can change the type of the input to button.
Check this fiddle http://jsfiddle.net/kiranvj/MBxNs/1/

Javascript Submit form with custom button?

Imagine an HTML form with multiple submit buttons,
Im trying to write javascript function to submit this form with one specific button,
usually we use:
form.submit();
but it doesnt specify which button is pressed,
any Ideas?

Just fire it directly?
document.querySelector("#someButton").onclick();
Or if you're wanting to fire the submit button directly of a form, why not
document.querySelector("#someForm input[type='submit']").onclick();

Using jQuery, you'd submit the form in an event handler that is bound to the click event on the desired button:
$('.trueSubmitFormButton').click(function(){
form.submit();
});