jQuery, если входное значение по умолчанию, запретить отправку по умолчанию - PullRequest
1 голос
/ 01 марта 2011

У меня есть форма, я хочу отключить функцию отправки, если значение ввода по умолчанию.

<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».

Я в тупике :) Что я делаю не так?

Вы можете увидеть это в действии здесь .

Ответы [ 4 ]

7 голосов
/ 01 марта 2011

С

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

Вы устанавливаете value на defaultValue.Сделайте это вместо:

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

Спасибо, Райан : вероятно, лучше использовать .val() вместо .attr('value') в случае, если текущее значение изменилось, так как значение указано в атрибуте HTMLи jQuery не обрабатывает это специально.

Сделайте это:

if ($("#company").val() == 'defaultValue'))
3 голосов
/ 01 марта 2011

Если значение по умолчанию просто отображается в качестве запроса на изменение значения, по возможности рассмотрите использование нового атрибута HTML5 placeholder.Вы даже можете использовать jQuery, чтобы помочь браузерам, которые его еще не поддерживают .Таким образом, вам не нужно проверять, является ли это значением по умолчанию.

Демо: http://jsfiddle.net/Marcel/pKBMu/

1 голос
/ 01 марта 2011

Попробуйте это с .val ():

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

Вы, вероятно, захотите расширить это, так что, возможно, посмотрите на плагин проверки для jQuery?

1 голос
/ 01 марта 2011

Правильно, я знаю, что на этот вопрос ответили, но у меня было время, поэтому я написал быструю структуру, которая позволила бы вам легко отслеживать изменения.По сути, это будет контролировать все элементы ввода, которые есть в форме, и будет визуально отслеживать их изменения, предоставляя им специальный класс при изменении значения.Таким образом, пользователь может сразу увидеть, что они изменили.Кроме того, эта небольшая структура также не позволит вам отправить форму обратно, если ни один из элементов ввода не изменился.Вы можете расширить эту платформу, добавив больше элементов, изменив селектор!

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