我是 jQuery 的新手,我已经学习了一些关于编写 fn 函数的教程,并且我的第一个教程成功了;然而,当我添加第二个 fn 函数时,整个脚本停止工作。对于我的问题的任何反馈或解决方案,我将不胜感激。我包含了我的 jQuery 以及我正在使用的 HTML 表单。
在当前形式下,它仅用于在用户按下“提交”时停止页面刷新,但是自从添加“jQuery.fn.clear”后,它就不再这样做了。
$(document).ready(function () {
// Length validation
jQuery.fn.validate = function (clength, value) {
if ($.trim($(this).val()).length < clength || $.trim($(this).val()) == value) {
$(this).val("You can't leave this blank!");
return false;
} else {
return false;
}
};
// Default value validation
jQuery.fn.clear = function () {
var value = $.trim($(this).val());
if (value == "You can't leave this blank" || value == "Name" || value == "Email Address"
value == "Telephone") {
$(this).val("");
}
};
$(function () {
$(".submit-button").click(function () {
$("#send-name").validate(1, "Name");
$("#send-mail").validate(6, "Email Address");
$(".spinny").fadeTo(0, 1);
$(this).attr('value', 'Validating...');
return false;
});
});
});
<form method="POST" action="">
<div class="left">
<label for="name">What's your name?</label>
<input type="text" id="send-name" name="name"
id="name" class="watermark" size="40" value="Name" />
<br />
<label for="email">Your Email</label>
<input type="text" id="send-mail" name="email" size="40"
class="watermark" Value="Email Address" />
<br />
<label for="number">Your contact number</label>
<input type="text" id="send-number" name="number"
size="40" class="watermark" value="Telephone" />
<br />
</div>
<div class="right">
<label for="message">How can I help?</label>
<textarea name="message" id="message" class="watermark"
cols="40" rows="10" title="Message"></textarea>
<br />
<Br />
<img src="_img/spinny.gif" class="spinny" />
<input type="submit" class="submit-button" value="Submit" />
</div>
</form>
最佳答案
你忘记了 });
在 $(function () {
之前。
您还忘记了 ||
之前 value == "Telephone"
实际上,只需删除 $(function () {
- 当您已经有了一个新的文档就绪 block 时,没有理由开始一个新的文档就绪 block !
$(document).ready(function () {
// Length validation
$.fn.validate = function (clength, value) {
...
};
// Default value validation
$.fn.clear = function () {
...
};
$(".submit-button").click(function () {
...
});
});
一些其他改进代码的建议:
$(this).attr('value'
不好。始终使用.val()
获取/设置元素的值。- 不要多次编写
jQuery
。如果您希望您的代码与$.noConflict()
兼容,请像这样更改第一行:jQuery(document).ready(function($){
<
关于查询。 Fn.Function 导致其他函数失效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10469441/