We Keep Coding

How to prevent submit but still validate required fields?

I have a form, and when is submitted I prevent it with e.preventDefault(), but I still want the browser to validate the required fields before I make the AJAX call.
I don't want to get fancy with javascript validation, I just want the browser to validate the required fields (HTML5).
How can I achieve this?

It works, even if you don't do the checkValidity check. In chrome, it won't call the submit function on the form if form is not valid:
$(document).ready(function(){
$("#calendar_form").submit(function(e){
e.preventDefault();
calendarDoAjax();
});
function calendarDoAjax(){
var proceed = false;
if( $("#calendar_form")[0].checkValidity ){
if ($("#calendar_form")[0].checkValidity()) {
proceed = true;
}
}else{
proceed = true;
}
if (proceed) {
//Do ajax call
}
}
});

Add this in the end of your submit function:
if (evt && evt.preventDefault) {
evt.preventDefault();
} else if (event) {
event.returnValue = false;
}
return false;
And pass the var evt in your function like this:
function(evt) { /* Your Code */ }

How to capture an html form submit with javascript?

Currently I have several text inputs and then a type image submit button. On the submit button I have onmouseover, onmouseout, etc.. This sends those to a javascript function that handles change of images for a hover effect. What I wanna do is submit the form and then do some checking like do passwords match and such. Would I do something with the action attribute of the form tag to submit it to a javascript function?

Firstly I recommend using something like jQuery. It makes the code a lot easier to manage. Here's how you'd do it in jQuery:
$('form').submit(function(e) {
var validated = true;
// do form validation
if (!validated) {
e.preventDefault();
}
return validated;
});
Here's how you'd do it in pure javascript:
// function to make sure we add the event correctly no matter which browser
function addEvent(evnt, elem, func) {
if (elem.addEventListener) { // W3C DOM
elem.addEventListener(evnt,func,false);
} else if (elem.attachEvent) { // IE DOM
elem.attachEvent("on"+evnt, func);
} else { // No much to do
elem[evnt] = func;
}
}
// get first form on page
var form = document.forms[0];
addEvent('submit', form, function(e) {
var validated = true;
// do form validation
if (!validated) {
e.preventDefault();
}
return validated;
});

<form onsubmit="return cancel()"><input type="submit" /></form>
<script>
function cancel()
{
//code validation
var validated = false;
if(!validated)return false;
else return true;
}
</script>

jQuery form submitting script does not work

I try to prevent a form submitting, with the following script, but it always does. I have even tried preventDefault() on document load, but it does not work.
$("form").submit(function() {
if ($("input").eq(3).val() == $("input").eq(4).val()) {
$("span").text("Validated...").show();
return true;
}
$("span").text("Passwords do not match!").show().fadeOut(1000);
return false;
});

$("form").submit(function(e) {
if ($("input").eq(3).val() == $("input").eq(4).val()) {
$("span").text("Validated...").show();
}
else{
$("span").text("Passwords do not match!").show().fadeOut(1000);
e.preventDefault();
}
});
You need to use preventDefault() to cancel the action. Note the parameter e that I added to the anonymous function call.

My suggestion, or the way I normally go about this is like this:
$("form").submit(function(e) {
e.preventDefault(); // form never fires unless I want it to
if( condition == true ) {
$(this).submit();
} else {
//Don't submit
}
}
Here is a great explanation of why preventDefault() > return false

In order for this to close I think I have found something, but it's absurd at best. My functions work when they are in a $(document).ready. Why? I would be glad to listen to your advice.
$(document).ready(function(){
$("form").submit(function() {
if ($("input").eq(3).val() == $("input").eq(4).val()) {
$("span").text("Validated...").show();
return true;
}
$("span").text("Passwords do not match!").show().fadeOut(1000);
return false;
});
});

Re-enabling Submit after prevent default

I am trying to unbind or reenable the prevent default so my form will submit on good data.
I have tried multiple examples. Here is my code and some of the examples i tried.
This code works great for what i want to. Just the last thing and resetting the div which i can implement after i get this.
function lengthRestriction(elem, min, max) {
var uInput = elem.value;
if (uInput.length >= min && uInput.length <= max) {
return true;
} else {
var cnt = document.getElementById('field');
cnt.innerHTML = "Please enter between " + min + " and " + max + " characters";
elem.focus();
$('#ShoutTweet').submit(function(e) {
e.preventDefault();
//bind('#ShoutTweet').submit();
//$('#ShoutTweet').trigger('submit');
});
}
}​
i have a jsbin set up too http://jsbin.com/ebedab/93

Don't try to set up and cancel a submit handler from within your validation function, do it the other way around: call the validation from within a single submit handler, and only call .preventDefault() if the validation fails:
$(document).ready(function() {
$('#ShoutTweet').submit(function(e) {
if (/* do validations here, and if any of them fail... */) {
e.preventDefault();
}
});
});
If all of your validations pass just don't call e.preventDefault() and the submit event will then happen by default.
Alternatively you can return false from your submit handler to prevent the default:
$('#ShoutTweet').submit(function(e) {
if (!someValidation())
return false;
if (!secondValidation())
return false;
if (someTestVariable != "somevalue")
return false;
// etc.
});

I'm not completely sure what you are asking, but if your goal is to destroy your custom submit handler, then use this:
$("#ShoutTweet").unbind("submit");
This assumes that you have a normal (not Ajax) form.

Just call submit on the form
$('#ShoutTweet').submit();

This works surely and enable form submission after event.preventDefault();
$('#your-login-form-id').on('submit', onSubmitLoader);
function onSubmitLoader(e) {
e.preventDefault();
var self = $(this);
setTimeout(function () {
self.unbind('submit').submit(); // like if wants to enable form after 1s
}, 1000)
}

Can you pause a form submission and then restart

Without using any JS libraries, is it possible to pause a form submission, run some code and then restart it?
Reason I ask is that I currently have a form that when it submits runs code that sends a request to my analytics provider. Works fine in Chrome/IE but in Firefox and Safari there is a drop out of these analytics of 60%.
The feeling is that the submission follows through before the scripts execute, hence why we are trying to pause the submit event.
Interested to hear any thoughts or insight.

You can use the submit event to cancel the form submission, do your analytics ajax stuff, and then submit the form programmatically using the submit method on the form element.
For example (live copy):
HTML:
<form id="theForm" action="#" method="GET">
<label>Field: <input type="text" name="theField"></label>
<br><input type="submit" value="Submit">
</form>
JavaScript:
window.onload = function() {
var form, counter;
form = document.getElementById("theForm");
form.onsubmit = function() {
if (typeof counter === "undefined") {
display("Starting count down (" + counter + ")");
counter = 3;
setTimeout(delayedSubmit, 1000);
}
display("Cancelling form submit");
return false;
};
function delayedSubmit() {
if (typeof counter === "number") {
--counter;
if (counter > 0) {
display("Continuing count down (" + counter + ")");
setTimeout(delayedSubmit, 1000);
}
else {
display("Count down complete, submitting form");
counter = undefined;
form.submit();
}
}
}
function display(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
};
There I've used a count down timer rather than an ajax operation, but the principle is the same.
Off-topic: I've used the old DOM0 style of setting up an event handler there (form.onsubmit = ...). I don't recommend it, but it keeps the example simple. Setting up event handlers is one of the places where a library like jQuery, Prototype, YUI, Closure, or any of several others can smooth over browser differences (and provide added functionality) for you, it's well worth considering using one.

Just place a button in place of the submit button that runs the analytics script as a function, then submit the form with
document.forms["myform"].submit();
See this site How to submit a form through javascript.
Hope that helps.

You can listen to the submit event. Something like:
(function() {
var processed = false;
form.onsubmit = function(event) {
event = event || window.event;
if(!processed) {
if(event.preventDefault) { // cancel default action
event.preventDefault();
}
else {
event.returnValue = false;
}
// run your code
// execute the next two lines in a callback if necessary
processed = true;
form.submit();
}
};
}());

You need to attach the function to run on event "onsubmit", return a false from the event handler if you want to cancel the form submission, or use below:
function onSubmitHandler(evnt){
//run some code set some flag
if(flag is set) evnt.preventDefault(); else return true;
}