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。”

我很难过:)我做错了什么？

You can see it in action here

Answer 1

使用

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

您将value设置为defaultValue。这样做：

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

感谢Ryan ：如果当前值自HTML属性中指定的值以来已更改，则使用.val()代替.attr('value')可能更好，而jQuery不会特意处理。

这样做：

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

Answer 2

如果默认值只是作为更改值的提示，请考虑使用新的HTML5 placeholder属性。你甚至可以use jQuery to help browsers that don't support it yet。这样您就不必费心检查它是否是默认值。

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

Answer 3

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

.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;
    }
});

Answer 4

尝试使用.val（）：

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

您可能希望进一步扩展这一点，或者查看jQuery的验证插件？

jQuery如果输入值是默认值，则阻止提交时的默认值

4 个答案: