Я бы хотел решить эту проблему с помощью функции отмены привязки (http://api.jquery.com/unbind/). Хорошая часть этого решения заключается в том, что нам не нужно присоединять вновь добавленные поля к объекту валидатора вручную.Полный код приведен ниже:
/ * файл server-side.html * / </p>
<p></p>
<pre><code><html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in production
Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<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>
/ * файл server-fail.js */
</p>
<pre><code>{
"name": "Invalid name. Our apologies",
"age": "You are too young",
"valid": "true"
}
Вы можете попробовать этот код, чтобы сделать функциональность более динамичной. Наслаждайтесь:)