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>

How to have onclick() event as well as HTML5 form validation together?

I have created a form using html5 form validation for my website. However, validation part works only if I dont add onclick=somefunction() in submit button. If I add onclick event, it skips the validation part and directly executes the onclick() event. Here is the code for submit button..How to ensure both validation part, as well as onclick event, executes?
<button type="submit" class="signupbtn" onclick="clickAlert()">Request for
Registration</button>
function clickAlert() {
alert("You will get a call to verify your Registration soon!");
}

This has nothing to do with the onclick event. It is caused by the alert.
You are pulling the focus away from the form which causes the browser generated error message to be removed at the instant it would normally be displayed.
Don't use alert(). Instead, modify the DOM of the page to display the message there.

ng2-date-time-picker other control events stop firing after date selection

I am using the template created via the "dotnet new angular" command.
I have a form which is working fine in all respects, until I add the ng2-date-time-picker control. The control works fine in terms of passing the selected values to a variable on the component when I set it up as explained here: https://www.npmjs.com/package/ng2-date-time-picker.
<input [ngModel]="momentValue | date: 'short'" [dateTimePicker]="momentValue" (dateTimePickerChange)="setMoment($event)" readonly />
However, after that happens:
-- The submit button no longer triggers the (submit) method bound to the form.
-- checkboxes on the form stop firing a (change) event.
It is as if the datepicker control does not return event handling to the main form.
I like this control, but I obviously can't use it if other controls on my form (including the submit button) become nonresponsive. I do note, however, that (click) events continue to fire.
Has anyone else had this problem? Any ideas?

Javascript: on blur getting the event's relatedTarget on mobile safari

So, I have a form with custom validation that is triggered on input blur event...
works fine
the form submit prevents the form to be submitted if there are validation errors on the page...
effectively what that means is if there is an erroneous message and it's focused.... if you click submit button, first the element's blur is triggered and the submit... but coz the element is
in practice I would have to click submit twice.... first time to re-validate the element and second to trigger submit again...(when all the elements are valid)
so on blur, I do
if ( event.relatedTarget && event.relatedTarget.type === "submit" ) {
...
}
and check if the instigator (of element's blur event) is the submit button...if yes, I skip the validation and trigger submit directly.... (that handles validation itself)..
It works perfectly, even in OSX...
the problem is mobile safari... that simply doesn't populate the event.relatedTarget... (is always null on submit click.... it's populated only on some other element's focus)....
how can I get the instigator on iOS?

I had the same problem where I had to hit the submit button on my form twice (on iOS.) Surprisingly I found that this solution worked:
how to prevent blur running
It was not clear at first but using this solution the mousedown event stops my normal blur event from happening but if you click the "Done" on the iOS keyboard it will let the blur event run because there was no mousedown event.

Form validation fails but submits page

I have a form which uses GET as the method. I want to do some js validation on the form. I bind the event using
document.forms[0].onsubmit = function(){return myObj.myFrm.isFormValid();}.
In Firefox it works the first time I click on submit but after a while if I click it again the form submits even though I've not changed and data.
Any ideas?

Simply adding an event handler doesn't stop it from submitting.
You need to add in preventDefault();
(Documentation)