using the submit event with modal form dialog
A way to make the dialog UI modal form demo respect the enter key for form submission
Add '<input type=submit style=display:none>' somewhere on the form
Add 'onSubmit="return false"' to the form opening tag
Put the form validation code in:
$("#dialog-form").bind( "submit", function() {... }
Change the create button to:
'Create an account': function(){ $(this).trigger('submit'); }
Tested and works in IE6/7/8 and FF3+
I think this should be the default operation of a modal dialog and suggest it could be neatly implemented by adding a "submit" attribute to the dialog creation method.
Note that the submit handler is actually bound to the DIV tag that wraps the FORM tag so the submit event must be bubbling up. I don't know if this is the native browser behaviour or a feature of jquery 1.4.1.
Additionally I improve user-friendliness with:
open: function(){ //open property of dialog creation method
allFields.val('').removeClass('ui-state-error'); // otherwise FF refresh keeps field data
updateTips( "All form fields are required."); // if the form was previously cancelled showing error
name.focus(); // can start typing immediately without needing to click into form field
and o.focus(); // returns focus to the field that has the error determined
before return false;
in the individual field validation functions of the modal-form demo