Textarea 边界检查输入答案

【问题标题】：Textarea border checking for inputTextarea 边界检查输入
【发布时间】：2014-11-07 01:45:28
【问题描述】：

目前我的代码会检查网站文本区域中的输入。如果我将它们全部留空，那么当我按下按钮时，它们都会以红色突出显示，这是意料之中的。但是，当我在 1 个或多个框中输入文本时，它只是通过。

每次我按下按钮时它都不会检查所有框，如果 1 个框中有文本，它会验证提交。 js代码有什么问题？

$(window).load( function () {
  $('#form1').on('submit', function(event) {

    // If the form validation returns false, block the form from submitting by 
    // preventing the event's default behaviour from executing.
    if (!validate()) {
      event.preventDefault();
    }    
  });

  function validate() {       
    var success = true;

    // Verify that the user entered some special instructions (we only take special orders!)
    var inputarea = $('.input');

    for(var i = 0; i < inputarea.length; i++)
    {
        if(inputarea.val() === "")
        {
            console.log("Missing textarea input");
            success = false;
            //NEED TO CHANGE THE LINE BELOW SO IT WONT SHOW TEXT, JUST CHANGE BORDER COLOUR
            $('.input').css("border","1px solid red");
        }
    }
    return success;   
  }
});

http://jsfiddle.net/originalwill/5cw1a2c2/

该链接不会显示我的错误，因为它是基于使用表单的按钮请求，因此在 jsFiddle 中不起作用。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我相信以下会是更好的解决方案：

function validate() {
   var success = true;
   // Verify that the user entered some special instructions (we only take special orders!)
   $('.input').each(function(i, item) {
      if ($(item).val() === "") {
         console.log("Missing textarea input");
         success = false;
         //NEED TO CHANGE THE LINE BELOW SO IT WONT SHOW TEXT, JUST CHANGE BORDER COLOUR
         $(item).css("border","1px solid red");
      }
   });
   return success;   
}

在您的原始代码中，您有以下语句：

if (inputarea.val() === "")

请注意，这与您在数组中的索引无关。它可能适用于以下内容：

if ($(inputarea.get(i)).val === "")

这将获得第 i 个条目的元素，然后检索其值，但我相信 jQuery.each() 函数更适合您的任务。

提供了一个示例jsFiddle。

【讨论】：

这段代码不起作用，只是点击按钮后验证，没有勾选框
@originalwill 抱歉...我在代码中打错了字。这将教会我不要摆弄它。我现在添加了一个用于演示的小提琴并更新了答案。

【解决方案2】：

在原生 javascript 中

var inputarea = documen.getElementsByClassName('input');
for(var i = 0; i < inputarea.length; i++)
{
    if(inputarea[i].value === "")
    {
        console.log("Missing textarea input");
        success = false;
        inputarea[i].style.border='1px solid red';
         // or inputarea[i].style = 'border:1px solid red;';
    }
}

在 Jquery 中我认为这会起作用

$('.input').each(function(i, item) {
      if ($(item).val() === "") {
         console.log("Missing textarea input");
         success = false;
         $(item).attr("style","border:1px solid red;");
         //note it will overwrite your element style in all Input class
      }else{
         $(item).removeAttr('style')
         // to remove border 
     }
   });

【讨论】：