StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I would love to solve the problem using the power of unbind function( <a href="http://api.jquery.com/unbind/" rel="nofollow">http://api.jquery.com/unbind/</a> ).The good part of this solution is that we don't have to attach the newly added fields to the validator object manually.The full code is given below:</p> <p>/* server-side.html file */ <code></p> <p></p> <pre><code><html>  <head> <title>jQuery Tools standalone demo</title>  <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>  <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/> <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/validator/css/form.css"/> </head> <body> <form id="myform"> <fieldset> <h3>Sample registration form</h3> <p> Enter bad values and then press the submit button. </p> <p> <label>website *</label> <input type="url" name="url" required="required" /> </p> <p> <label>name *</label> <input type="text" name="name" pattern="[a-zA-Z ]{5,}" maxlength="30" /> </p> <p> <label>age</label> <input type="number" name="age" size="4" min="5" max="50" /> </p> <p id="terms"> <label>I accept the terms</label> <input type="checkbox" required="required" /> </p> <button type="submit">Submit form</button> <button type="reset">Reset</button> </fieldset> </form> <script> // initialize validator and add a custom form submission logic var submitEvent = function(){$("#myform").validator().submit(function(e) { var form = $(this); // client-side validation OK. if (!e.isDefaultPrevented()) { // submit with AJAX $.getJSON("server-fail.js?" + form.serialize(), function(json) { // everything is ok. (server returned true) if (json['valid'] === 'true') { if($("#testField").length == 0){ $("#terms").before('<p> <label id="testField">email *</label><input type="email" name="email" required="required" /></p>'); } else { alert("new field validated successfully"); } form.unbind("submit"); submitEvent(); // server-side validation failed. use invalidate() to show errors } else { form.data("validator").invalidate(json); } }); // prevent default form submission logic e.preventDefault(); } });}; submitEvent(); </script> </body> </html> </code></pre> <p></code></p> <p>/* server-fail.js file */</p> <p><code> </p> <pre><code>{ "name": "Invalid name. Our apologies", "age": "You are too young", "valid": "true" } </code></pre> <p></code></p> <p>You can try this code to make the functionality more dynamic.Enjoy :)</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