Kiểm tra xem đầu vào có trống không bằng jQuery

Tôi có một biểu mẫu mà tôi muốn tất cả các trường được điền vào. Nếu một trường được nhấp vào và sau đó không được điền, tôi muốn hiển thị nền đỏ.

Đây là mã của tôi:

$('#apply-form input').blur(function () {
  if ($('input:text').is(":empty")) {
    $(this).parents('p').addClass('warning');
  }
});

Nó áp dụng lớp cảnh báo bất kể trường được điền hay không.

Tôi đang làm gì sai?

$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

Và bạn không nhất thiết cần .lengthhoặc xem nếu đó là >0một chuỗi trống đánh giá là sai dù sao nhưng nếu bạn muốn cho mục đích dễ đọc:

$('#apply-form input').blur(function()
{
    if( $(this).val().length === 0 ) {
        $(this).parents('p').addClass('warning');
    }
});

Nếu bạn chắc chắn nó sẽ luôn hoạt động trên một phần tử trường văn bản thì bạn chỉ có thể sử dụng this.value.

$('#apply-form input').blur(function()
{
      if( !this.value ) {
            $(this).parents('p').addClass('warning');
      }
});

Ngoài ra, bạn nên lưu ý rằng $('input:text')lấy nhiều yếu tố, chỉ định bối cảnh hoặc sử dụng thistừ khóa nếu bạn chỉ muốn tham chiếu đến một yếu tố đơn độc (miễn là có một trường văn bản trong hậu duệ / con cái của bối cảnh).

Mọi người đều có ý tưởng đúng, nhưng tôi thích rõ ràng hơn một chút và cắt xén các giá trị.

$('#apply-form input').blur(function() {
     if(!$.trim(this.value).length) { // zero-length string AFTER a trim
            $(this).parents('p').addClass('warning');
     }
});

nếu bạn không sử dụng .length, thì mục nhập '0' có thể bị gắn cờ là xấu và mục nhập 5 khoảng trắng có thể được đánh dấu là ok nếu không có $ .trim. May mắn nhất.

Làm điều đó trên mờ là quá hạn chế. Nó giả định rằng đã tập trung vào trường biểu mẫu, vì vậy tôi thích làm điều đó hơn khi gửi và ánh xạ qua đầu vào. Sau nhiều năm đối phó với các thủ thuật mờ ảo, tập trung, v.v., giữ mọi thứ đơn giản hơn sẽ mang lại nhiều khả năng sử dụng hơn khi tính.

$('#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');
}

bạn cũng có thể sử dụng ..

$('#apply-form input').blur(function()
{
    if( $(this).val() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});

nếu bạn nghi ngờ về không gian, thì hãy thử ..

$('#apply-form input').blur(function()
{
    if( $(this).val().trim() == '' ) {
          $(this).parents('p').addClass('warning');
    }
});

sao không ai nhắc đến

$(this).filter('[value=]').addClass('warning');

đối với tôi có vẻ giống jquery hơn

Sự kiện keyup sẽ phát hiện nếu người dùng cũng xóa hộp (tức là backspace tăng sự kiện nhưng backspace không làm tăng sự kiện nhấn phím trong IE)

    $("#inputname").keyup(function() {

if (!this.value) {
    alert('The box is empty');
}});

Cân nhắc sử dụng plugin xác thực jQueryThay vào đó . Nó có thể hơi quá mức đối với các trường bắt buộc đơn giản, nhưng nó đủ chín chắn để xử lý các trường hợp cạnh mà bạn chưa từng nghĩ đến (cũng như bất kỳ ai trong chúng ta cho đến khi chúng ta gặp phải chúng).

Bạn có thể gắn thẻ các trường bắt buộc bằng một lớp "bắt buộc", chạy $ ('form'). Validate () bằng $ (tài liệu). Đã () và đó là tất cả những gì nó cần.

Nó thậm chí còn được lưu trữ trên Microsoft CDN, để phân phối nhanh chóng: http : //www.asp.net/ajaxl Library / CDN.ashx

Bộ :emptychọn giả được sử dụng để xem nếu một phần tử không chứa con, bạn nên kiểm tra giá trị:

$('#apply-form input').blur(function() {
     if(!this.value) { // zero-length string
            $(this).parents('p').addClass('warning');
     }
});

Có một điều khác mà bạn có thể muốn nghĩ đến, Hiện tại nó chỉ có thể thêm lớp cảnh báo nếu nó trống, làm thế nào để loại bỏ lớp một lần nữa khi biểu mẫu không còn trống nữa.

như thế này:

$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    } else if ($(this).val()) {
          $(this).parents('p').removeClass('warning');
    }
});

Dưới đây là một ví dụ sử dụng keyup cho đầu vào được chọn. Nó cũng sử dụng một phần trang trí để đảm bảo rằng một chuỗi các ký tự chỉ khoảng trắng không kích hoạt phản hồi trung thực. Đây là một ví dụ có thể được sử dụng để bắt đầu một hộp tìm kiếm hoặc một cái gì đó liên quan đến loại chức năng đó.

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

Kiểm tra xem tất cả các trường có trống không và nối BẬT hoặc TẮT trên Filter_button

Bạn có thể thử một cái gì đó như thế này:

$('#apply-form input[value!=""]').blur(function() {
    $(this).parents('p').addClass('warning');
});

Nó sẽ chỉ áp dụng .blur()sự kiện cho các đầu vào có giá trị trống.

<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>// :)

Với HTML 5, chúng ta có thể sử dụng một tính năng mới "bắt buộc", chỉ cần thêm nó vào thẻ mà bạn muốn được yêu cầu như:

<input type='text' required>

Bộ sưu tập lớn các câu trả lời, muốn thêm rằng bạn cũng có thể thực hiện việc này bằng cách sử dụng :placeholder-shownbộ chọn CSS. Sử dụng IMO sạch hơn một chút, đặc biệt nếu bạn đã sử dụng jQ và có trình giữ chỗ trên đầu vào của bạn.

if ($('input#cust-descrip').is(':placeholder-shown')) {
  console.log('Empty');
}

$('input#cust-descrip').on('blur', '', function(ev) {
  if (!$('input#cust-descrip').is(':placeholder-shown')) {
    console.log('Has Text!');
  }
  else {
    console.log('Empty!');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">

Bạn cũng có thể sử dụng :validvà :invalidbộ chọn nếu bạn có yêu cầu đầu vào. Bạn có thể sử dụng các bộ chọn này nếu bạn đang sử dụng thuộc tính bắt buộc trên đầu vào.

Một giải pháp chỉ dành cho CSS sạch sẽ là:

input[type="radio"]:read-only {
        pointer-events: none;
}