У меня есть форма, в которой я бы хотел, чтобы все поля были заполнены. Если в поле щелкнуть и не заполнить, я хотел бы отобразить красный фон.
Вот мой код:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
Он применяет класс предупреждения независимо от заполняемого поля или нет.
Что я делаю неправильно?
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
}
});
И вам не обязательно нужно .length или посмотреть, есть ли он >0, поскольку пустая строка все равно равно false, но если вы хотите в целях чтения:
$('#apply-form input').blur(function()
{
if( $(this).val().length === 0 ) {
$(this).parents('p').addClass('warning');
}
});
Если вы уверены, что он всегда будет работать с элементом текстового поля, вы можете просто использовать this.value.
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
Также обратите внимание, что $('input:text') захватывает несколько элементов, задает контекст или использует ключевое слово this, если вы просто хотите ссылку на одиночный элемент (при условии, что в текстовом поле есть потомки/дети).
У всех есть правильная идея, но мне нравится быть немного более явным и обрезать значения.
$('#apply-form input').blur(function() {
if(!$.trim(this.value).length) { // zero-length string AFTER a trim
$(this).parents('p').addClass('warning');
}
});
если вы не используете .length, тогда запись '0' может быть помечена как плохая, а запись из 5 пробелов может быть отмечена как ok без $.trim. Лучшее из удачи.
Выполнение этого размытия слишком ограничено. Предполагается, что основное внимание уделяется области формы, поэтому я предпочитаю делать это при отправке и сопоставлять входные данные. После долгих лет работы с причудливыми размытиями, фокусом и т.д. Трюки, упрощая вещи, вы получите больше удобства использования там, где это возможно.
$('#signupform').submit(function() {
var errors = 0;
$("#signupform :input").map(function(){
if( !$(this).val() ) {
$(this).parents('td').addClass('warning');
errors++;
} else if ($(this).val()) {
$(this).parents('td').removeClass('warning');
}
});
if(errors > 0){
$('#errorwarn').text("All fields are required");
return false;
}
// do the ajax..
});
if ($('input:text').val().length == 0) {
$(this).parents('p').addClass('warning');
}
почему никто не упоминает
$(this).filter('[value=]').addClass('warning');
кажется мне более похожим на jQuery
вы также можете использовать.
$('#apply-form input').blur(function()
{
if( $(this).val() == '' ) {
$(this).parents('p').addClass('warning');
}
});
Если у вас есть сомнения относительно пробелов, попробуйте.
$('#apply-form input').blur(function()
{
if( $(this).val().trim() == '' ) {
$(this).parents('p').addClass('warning');
}
});
Псевдо-селектор :empty используется, чтобы увидеть, не содержит ли элемент никаких дочерних элементов, вы должны проверить значение:
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});
Вместо этого используйте плагин проверки jQuery. Это может быть немного избыточно для простых обязательных полей, но достаточно зрело, что он обрабатывает граничные случаи, о которых вы даже не думали (и никто из нас не дошел бы до них).
Вы можете пометить обязательные поля классом "required", запустить $('form'). validate() в $(document).ready() и все, что требуется.
Он даже размещался на Microsoft CDN, для быстрой доставки: http://www.asp.net/ajaxlibrary/CDN.ashx
Есть еще одна вещь, о которой вы могли бы подумать. В настоящее время она может добавлять класс предупреждения только в том случае, если она пуста, и как удалить класс снова, когда форма больше не пуста.
вот так:
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
} else if ($(this).val()) {
$(this).parents('p').removeClass('warning');
}
});
function checkForm() {
return $('input[type=text]').filter(function () {
return $(this).val().length === 0;
}).length;
}Вот пример использования keyup для выбранного ввода. Он также использует обрезку, чтобы убедиться, что последовательность только символов пробела не вызывает правдивого ответа. Это пример, который можно использовать для запуска окна поиска или что-то, связанного с этим типом функций.
YourObjNameSpace.yourJqueryInputElement.keyup(function (e){
if($.trim($(this).val())){
// trimmed value is truthy meaning real characters are entered
}else{
// trimmed value is falsey meaning empty input excluding just whitespace characters
}
}
$(function() {
var fields = $('#search_form').serializeArray();
is_blank = true;
for (var i = 0; i < fields.length; i++) {
// excluded fields
if ((fields[i].name != "locale") && (fields[i].name != "utf8")) {
if (fields[i].value) {
is_blank = false;
}
}
}
if (is_blank) {
$('#filters-button').append(': OFF');
}
else {
$('#filters-button').append(': ON');
}
});
Убедитесь, что все поля пусты и добавлены или отключены в Filter_button
Вы можете попробовать что-то вроде этого:
$('#apply-form input[value!=""]').blur(function() {
$(this).parents('p').addClass('warning');
});
Он будет применять событие .blur() только к входам с пустыми значениями.
<script type="text/javascript">
$('input:text, input:password, textarea').blur(function()
{
var check = $(this).val();
if(check == '')
{
$(this).parent().addClass('ym-error');
}
else
{
$(this).parent().removeClass('ym-error');
}
});
</script>// :)
С HTML 5 мы можем использовать новую функцию "требуется", просто добавим ее в тег, который вы хотите, например:
<input type='text' required>
Событие keyup обнаружит, удалил ли пользователь также поле (backspace), но backspace не вызывает событие нажатия клавиши в IE)
$("#inputname").keyup(function() {
if (!this.value) {
alert('The box is empty');
}});