jQuery 如果输入值是默认值，则防止提交时出现默认值

Question

我有一个表单，如果输入的值为默认值，我想禁用提交功能。

<input id="company" name="companyname" value="company">
<input type="submit" class="button">

我尝试了这个 jquery：

$(".button").click(function(e){
    if($("#company").attr('value', 'defaultValue'))
       {
           alert("Please fill out the contact form."); 
           e.preventDefault();
       }
   });

但它没有按预期工作，它会按预期触发并发出警报，但也会将输入的值更改为“defaultValue”。

我很困惑:)我做错了什么？

您可以在此处查看它的实际效果。

Answer 1

您将

if ($("#company").attr('value', 'defaultValue'))

value 设置为 defaultValue。这样做：

if ($("#company").attr('value') == 'defaultValue'))

谢谢 Ryan：最好使用 .val() 而不是 .attr('value')，以防当前自 HTML 属性中指定的值以来，值已更改，并且 jQuery 不会专门处理该情况。

这样做：

if ($("#company").val() == 'defaultValue'))

Answer 2

如果默认值只是作为更改值的提示，如果可能，请考虑使用新的 HTML5 占位符 属性。您甚至可以使用 jQuery 来帮助尚不支持它的浏览器。这样你就不需要费心检查它是否是默认值。

演示：http://jsfiddle.net/Marcel/pKBMu/

Answer 3

尝试使用 .val():

http://jsfiddle.net/69HjD/2/

你'你可能想要进一步扩展它，所以也许看看 jQuery 的验证插件？

Answer 4

是的，我知道这个问题已经得到解答，但我有一些时间，所以我编写了一个快速框架，可以让您轻松跟踪更改。基本上，这将监视表单上的所有输入元素，并在值更改时通过为它们提供一个特殊的类来直观地跟踪它们的更改。因此，用户一目了然地可以看到他们更改了什么。此外，如果没有任何输入元素发生更改，这个小框架还会阻止您发回表单。您可以通过更改选择器来扩展此框架以包含更多元素！

.changedValue
{
    border-bottom: 1px solid #0c5403 !important;
    background: #e1fedd !important;
}

<input id="company" name="companyname" value="company"/>
<input type="submit" class="button"/>

$('input').live('focusin', function() {
    var tx = this,
        jqt = $(tx);

    //store the original value if we don't already have it
    if (typeof(tx.defaultValue) == 'undefined') {
        tx.defaultValue = tx.value;
    }

})
//control change
.live('focusout', function() {
    var t = this,
        jqThis = $(t);
    jqThis[t.defaultValue != t.value ? 'addClass' : 'removeClass']('changedValue');


});


$(".button").click(function(e) {
    if ($("input.changedValue").length == 0) {
        alert("Please fill out the contact form.");
        e.stopPropagation();
        e.preventDefault();
        return false;
    }
});