Most forms will only have the one submit button. Where this is the case it is generally unnecessary to give the submit button a name since you do not need to pass its value to the server as it will alsways be the same. Similarly you don't need to give it an id as it will not need a separate lable and should not need to be referenced from JavaScript as JavaScript has other ways to submit the form. The only time you would name submit buttons is where you have more than one and need to pass the value to the server so the server knows which submit button was pressed. The only time you would give a submit button an id is if you need to style the button differently from other submit buttons via CSS or specifically need to be able to redifine either the button's value or appearance from JavaScript.
Basically the submit button itself only triggers the submission of the form, all of the rest of the information relating to JavaScript validation of the form, where to submit the form to, and how to pass the information in the form is controlled from the form tag. As we saw in a prior example the form tag can easily be accessed from any of the fields within the form once you have a reference to that form field and most form fields will have an id.
In this example we look at how you would attach the form validation function to be run when the form is submitted where we assume that the form contains a field with an id of 'email' (the same processing would apply to any form, you just need to pick an id within the form). The example also includes code that would prevent the form being submitted if a validEmail() function returns false to indicate that the email address is not valid.
if (window.addEventListener)
addEvent = function(ob, type, fn ) {
ob.addEventListener(type, fn, false );
};
else if (document.attachEvent)
addEvent = function(ob, type, fn ) {
var eProp = type + fn;
ob['e'+eProp] = fn;
ob[eProp] = function(){ob['e'+eProp]( window.event );};
ob.attachEvent( 'on'+type, o[eProp]);
};
stopDef = function(e) {
if (e && e.preventDefault)
e.preventDefault();
else if (window.event && window.event.returnValue)
window.eventReturnValue = false;
};
validateForm = function() {
// form validations here for example
if (!validEmail()) stopDef();
}
addEvent(document.getElementById('email').form,
'submit',
validateForm);