Question

我对jQuery很新，并且已经在学校项目列表应用程序上解决了一些问题。如果输入为空，我一直在寻找一种方法来输入NOT提交。我找到了一些阻止它进入的方法，并弹出警报信息等。但是，当提交表单时，我会显示2个按钮，即使在尝试使用警报弹出窗口阻止它之后也会显示。当我尝试让按钮在输入空白时停止显示时，我最终收到带有警报消息的垃圾邮件，按钮仍然显示，整个页面变得棘手......

所以我的问题是如何应用警告消息，或者只是阻止表单完全提交并防止按钮在输入为空白时适用。

RcppParallel

$(document).ready(function() {
  $('body').css('opacity', '0').fadeTo(1500, 1, 'swing');



});

$('button.submit').click(function() {
  var new_task = $('input').val() + " x" + $('input + input').val();
  var $deleteButton = $('<button />').addClass('remove').text('');
  var $li = $('<li />').text(new_task);
  var $quantityButton = $('<input type="checkbox" />');



  $('#list').append($li);
  $quantityButton.appendTo($li);
  $deleteButton.appendTo($li);
  $("form").trigger("reset");

  $('#form').click(function() {
    if ($(this).val() == '') {
      alert('Input can not be left blank');
    }
  });


  return false;
});



$('#list').on('click', '.remove', function() {
  $(this).parent().remove();
  console.log($(this));
});


$('#list').on('change', 'input[type="checkbox"]', function() {
  var $li = $(this).parent();

  if ($(this).is(':checked')) {
    $li.css('textDecoration', 'line-through');
  } else {
    $li.css('textDecoration', 'none');
    return false;
  }



});

如果有帮助的话，我的项目总体上是这样的。 Mockup 1

感谢您的帮助。我对编码很陌生，感谢所有的帮助和耐心！

-Thomas

Answer 1

请参阅以下有关验证空白输入的信息。当任何输入空白时，它将发出警报。根据您的要求修改字段

＆＃13;

$('button.submit').on('click', function(){  
  var blankFlag = false;
  $('input').each(function(){
    if(!jQuery.trim(jQuery(this).val()).length){
      blankFlag = true;
    }
   });
    if(blankFlag){
      alert('blank');
      return false;
    }
    return true; 
});

＆＃13;

Answer 2

如果您想停止提交以提交您的网页，请使用

e.preventDefault();

这将阻止页面提交。并在提交按钮单击中使用它。

如果要隐藏按钮，直到文本框为空。

$("#myTextBox").change(function(){
if($(this).val().length>0){$("#myButton").show()}
else{$("#myButton").hide()}
});

并保持按钮隐藏在初始阶段。这将起作用

如果输入为空，则显示jQuery STOP按钮

2 个答案: