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

时间:2011-03-01 11:40:14

标签: jquery html input default-value

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

<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

4 个答案:

答案 0 :(得分:7)

使用

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

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

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

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

这样做:

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

答案 1 :(得分:3)

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

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

尝试使用.val():

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

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