StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First, please be sure you do all of your validation on the server-side. I like to get my forms working without any JavaScript whatsoever. I am assuming you have done that much.</p> <p>****ORIGINAL ANSWER***</p> <p>Then, change your "submit" element to a button element. On the OnClick of the button element, run a JavaScript function that validates. Lots of samples on how to do that as you know.</p> <p>If the validation fails, send up alerts. If it is successful, use JavaScript to submit the form.</p> <p>****NEW, TOOL USING ANSWER***</p> <p>You can also employ JQuery as (orip points out) and it's plugins to do this. They handle a lot of the hard work. Please make sure my comments are telling the correct story. this code also does the AJAX submitting.</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <script src="http://code.jquery.com/jquery-latest.js"></script>  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css" type="text/css" media="screen" />  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>  <script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js"></script> <script type="text/javascript" language="javascript"> //Wait until the document is loaded, then call the validation. Due to magic in JQuery or the plugin // this only happens when the form is submitted. $(document).ready(function(){ //When the submit button is clicked $("#signup").click(function() { //if the form is valid according to the fules if ($("#newsletterform").valid()) { //Submit the form via AJAX $('#newsletterform').ajaxForm(function() { //this alert lets me know the submission was successfull alert("Thank you!"); }); } }) }); </script>  <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } </style> </head> <body> <form action="" id="newsletterform" method="get">  <input type="text" name="email" class="required email" id="textnewsletter" /> <input type="submit" id="signup" /> </form> </body> </html> </code></pre> <p>This isn't the tightest code you could write, but it will serve as an example.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload