Вы можете посмотреть код метода url2 из Additional-Methods.js и создать свой собственный метод на основе кода. Внутри вашего пользовательского метода проверки вы можете сравнить текущее значение URL со строкой URL-адреса по умолчанию и интерпретировать текст как пустую строку или что-то другое, зависит от ваших требований.
ОБНОВЛЕНО : Я посмотрел еще раз в вашем коде и обнаружил, что реальная проблема, с которой вы сталкиваетесь, заключается в том, что вы помещаете тексты подсказок внутри полей формы. Отсюда следует, что плагин validate пытается проверить подсказки. Например, вы помещаете «Имя» в поле имени формы. Поле, которое вы помечаете как обязательное, но в исходном коде плагин проверки получает в качестве ввода текст «Имя», и все выглядит корректно.
Так что мне кажется, что вы действительно можете решить эту проблему, если будете вырезать значения по умолчанию из полей ввода до проверки . Я не нашел и прямого способа сделать это, поэтому я перезаписал две функции плагина validate: clean и focusInvalid. Более того, я заменил использование 'onfocus' и 'onblur' на ненавязчивую версию.
В конце, после небольшого исправления ошибки в HTML, код будет следующим:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>How do you validate optional fields with default value</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></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; }
</style>
<script type="text/javascript">
$(document).ready(function(){
var defaultValues = {
// the property name is the value of the "name" attribute in the form
name: "Name",
email: "Email",
url: "URL",
comment: "Comment"
},
form = $("#commentForm"),
resetDefaults = function() {
var n, el;
for (n in defaultValues) {
if (defaultValues.hasOwnProperty(n)) {
el = $("input[name='"+n+"'], textarea[name='"+n+"']",form[0]);
if (el.length === 1 && el[0].value === "") {
el[0].value = defaultValues[n];
}
}
}
};
resetDefaults(); // fill form defaults
$("input[name], textarea[name]",form[0])
.focusin(function() {
if (defaultValues.hasOwnProperty(this.name) && this.value === defaultValues[this.name]) {
this.value = '';
}
})
.focusout(function() {
if (defaultValues.hasOwnProperty(this.name) && this.value === '') {
this.value = defaultValues[this.name];
}
});
form.validate();
// now we subclass "clean" and "focusInvalid" methods of the validator
form.data('validator').clean = function(elem) {
if (elem) {
if (defaultValues.hasOwnProperty(elem.name) && elem.value === defaultValues[elem.name]) {
elem.value = '';
}
}
return $(elem)[0];
};
var oldFocusInvalid = $("#commentForm").data('validator').focusInvalid;
$("#commentForm").data('validator').focusInvalid = function( selector ) {
oldFocusInvalid.call(this); // call the original method
resetDefaults();
};
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<input id="cname" name="name" size="25" class="required">
</p>
<p>
<input id="cemail" name="email" size="25" class="required email">
</p>
<p>
<input id="curl" name="url" size="25" class="url">
</p>
<p>
<textarea id="ccomment" name="comment" cols="35" rows="5" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
</body>
</html>
Вы можете посмотреть демоверсию здесь .