UPDATE: A MORE complete answer:
NOTE: this assumes you will be using jQuery 1.4.3 or higher
The SUBMIT event is sent to an element when the user is attempting to submit a FORM:
- It can only be attached to
<form>
elements. Forms can be submitted either by clicking an explicit:
<input type="submit">
,<input type="image">
, or<button type="submit">
,
orby pressing Enter when certain form elements have focus.
NOTE: *Depending on the browser, Enter may only cause a form submission if:- the form has exactly one text field, or
only when there is a submit button present.
Therefore, your code shouldn't rely on a particular behavior for this key unless the issue is forced by observing the keypress event for presses of theEnter
key which is character code 13.- Here is information about how to use the
.keypress()
handler from jQuery.com - Here is a chart comparing all ASCII character/key codes, HTML escape codes, and they keys/character they represent.
- Here is information about how to use the
You can get more detailed information at the jQuery.com site .submit()
page HERE.
In your scenario (and most), I would use a <input type="submit">
button and capture the SUBMIT event.
In the submit handler callback function:
$( "form#icpsignup" ).submit(function( evt ){
//...
$('#fields_email').mailgun_validator({
api_key: 'pubkey-8s-e-ovj0nbi32xw5eeyibrmv-lkq2e2', // replace this with your Mailgun public API key
in_progress: validation_in_progress,
success: validation_success,
error: validation_error,
});
//...
}
You will need to validate your <form>
(i.e. use whatever code, statement, etc. on one or more input
fields). Then upon...
- success - use a
return true
statement - failure - use an
evt.preventDefault();
whereevt
is the argument passed to your submit handler.
.
Below is a detailed example:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>submit demo</title> <style> p { margin: 0; color: blue; } div,p { margin-left: 10px; } span { color: red; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>Type 'correct' to validate.</p> <form action="javascript:alert('success!');" <div> <input type="text"> <input type="submit"> </div> </form> <script> // "function( evt )" is an anonymous function. It *is* your handler $( "form" ).submit(function( evt ) { // evt is the *event* object. // name it whatever you'd like. if ( $( "input:first" ).val() === "correct" ) { $( "span" ).text( "Validated..." ).show(); return true; } $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 ); evt.preventDefault(); }); </script> </body> </html>