2013-08-05 2 views
1

Я хотел бы изменить цвет всех входных текстовых границ в одно и то же время, если он/они имеют нулевое значение или нет значения при нажатии кнопки, у меня есть функция, чтобы сделать это. Сначала я поместил текст ввода, который хочу проверить значения в массиве, а затем вызовет функцию, в которой он проходит через массив и проверяет нулевые значения. При щелчке по кнопке, если весь текст ввода будет пустым, он изменит только цвет первого индекса в массиве.Измените цвет рамки, если входное значение равно нулю

Вот моя функция:

function isValid(array){ 
      for(var x=0;x<array.length;x++){ 
       if (array[x].value.trim() == ""){ 
        $(array[x]).css("border-color","#FF0000"); 
        return false; 
       } 
      } 
     } 

Это, как я называю функцию:

var array = [document.getElementById('txtLastName'), 
      document.getElementById('txtFirstName') 
      ]; 
if (!isValid1(array)) { 
return false; 
    } 

Как изменить цвет границы всех вход в массиве с нулевыми значениями? Спасибо!

+0

И ваш вопрос ...? –

+0

Как изменить цвет границы всех входных данных в массиве с нулевыми значениями – QKWS

+0

изменить для (var x = 0; x <= array.length; x ++) {} в цикле –

ответ

2

Вот мой два цента, может потребоваться настройка:

function isValid(selector){ 
    return ($(selector).filter(function() { 
     return (this.value.trim() === ""); 
    }).css("border-color","#FF0000").length === 0); 
} 

Чтобы использовать его:

isValid("#txtLastName, #txtFirstName"); 

Я строю селектор CSS в вызывающей и передать его isValid(), вы могли бы пройти массив ["txtFirstName", "txtFirstName"] и построить селектор в isValid().

Существует много способов сделать это, более модульным подходом является использование класса nullValidate в качестве селектора, так что вы можете иметь столько утвержденных полей, сколько хотите.

EDIT: возвращения недопустимые элементы найдены

+0

Я забыл упомянуть, что мне нужно вернуть false, если есть нулевые значения. где я могу добавить это? – QKWS

+0

Что вы подразумеваете под нулевыми значениями? '' значения имеют значение по умолчанию '' '' (или значение, указанное в атрибуте 'value') и не будут' null'. – leesei

+0

Или вы хотите, чтобы функция помогала отслеживать, есть ли пустое значение? Я сделал редактирование, вы можете проверить правдивость 'isValid()' return. – leesei

0

Почему смесь jQuery и ванили JS .. Может просто использовать метод filter.

$('#txtLastName, #txtFirstName').filter(function() { 
    return $.trim(this.value) === ''; 
}).css("border-color","#FF0000"); 

И нет ничего плохого в том, как вы написали код.

Возможно, вы, вероятно, не использовали правильный идентификатор.

Your Code

JQuery Code

0

Просто мои 2 цента на сумму

<form name="form"> 
<input type="text" name="firstname" /> 
<input type="button" name="submit_btn" value="send" /> 
</form> 


$(document).ready(function(){ 

$('input[type="text"]').keyup(function(){ 
    var length = $('input[type="text"]').val().length; 
    if(length===0){ 
     $(this).css({"border":"1px solid red"}); 
    } 
    else { 
     $(this).css({"border": ""}); 
    } 
}); 

$('input[type="button"]').click(function(){ 
    var length = $('input[type="text"]').val().length; 
    if(length===0){ 
     $('input[type="text"]').css({"border":"1px solid red"}); 
    } else { 
     $('input[type="text"]').css({"border":""}); 
    } 
}); 

});

Смежные вопросы