检查提交时输入是否为空答案

【问题标题】：Check if input empty on submit检查提交时输入是否为空
【发布时间】：2011-08-18 16:43:58
【问题描述】：

我一直在寻找解决方案，但似乎找不到任何适合我的示例。到目前为止，这是我所得到的：

$("#register-form").submit(function(){
            if($(".required input").val() == '') {
                alert("Please fill in all the required fields (indicated by *)");
                $(".required").addClass('highlight');
                // $('input[type=submit]', this).attr('disabled', 'disabled');
                return false;
            }
        });

由于某种原因，当我提交的表单没有填写任何必填字段（有两个）时，它可以工作，但如果其中一个被填写，它不会。

有什么想法吗？

谢谢

苏

【问题讨论】：

你的 html 表单是什么样的？
(html5: 在输入标签中使用必需的属性)stackoverflow.com/questions/17865148/…的可能重复

标签： jquery validation forms

【解决方案1】：

您的代码的问题在于，您只测试了根据需要标记的第一个字段。 $(".required input") 仅返回表单中与该选择器匹配的第一个输入。

这将遍历表单中标记为必需的所有输入（根据您的选择器）。如果它找到一个值为 '' 的值，那么它将提交函数设置为返回 false 并突出显示空白字段。它还会从现在有效但以前在早期表单提交尝试中无效的字段中删除突出显示类。

$("#register-form").submit(function(){
    var isFormValid = true;

    $(".required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("highlight");
            isFormValid = false;
        }
        else{
            $(this).removeClass("highlight");
        }
    });

    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");

    return isFormValid;
});

【讨论】：

谢谢瑞恩 - 我不得不做一些修复（在一些地方用不完整的括号），但你的解决方案对我来说最有意义。这是我最终得到的代码：pastie.org/1864757 感谢大家的帮助！
啊，我想我确实错过了几个右括号/括号...很高兴我能帮上忙。

【解决方案2】：

$("#register-form").submit(function() {
  $('.required input').each(function() {
    if ($($this).val() == '') { 
      $(this).addClass('highlight');
    }
  });

  if ($('.required input').hasClass('highlight')) {
    alert("Please fill in all the required fields (indicated by *)");
    return false;
  }
}

试一试。

编辑移动了警报，这样用户就不会因为警报消息而脸红，很好。

【讨论】：

领先我几秒！ +1，顺便说一句。
+1，将您的警报移到您的 return false; 上方，这样它就不会淹没用户。
它有一个错误，只有当第一个元素有highlight类时才会取消提交。
@David：正如 Edgar 所说，你的最后一个 if 条件是有缺陷的。它只会检查第一个必需的输入是否具有突出显示类。
..并来自 jQuery 文档：“确定是否为 ANY 的匹配元素分配了给定的类。” （强调我的）

【解决方案3】：

简单的解决方案！：

 function checkForm(){
        $("input.required").css("border","1px solid #AFAFAF");
        $("input.required[value=]").css("border-color","red");
        if($("input.required").val().length<2)return false;
        return true;
    }

【讨论】：

【解决方案4】：

也许你的情况应该是这样的：

if($("input.required").val() == '')... //Pay attention to the selector

因为您的选择器正在查找所有输入 children of .required

【讨论】：

这只会返回第一个匹配输入的val()，就像OP的代码一样。唯一的区别是你的假设不同的 html 结构。

【解决方案5】：

根据 David Fell 的回答，（我认为这有一个错误）您可以这样做：

$("#register-form").submit(function() {
  $('.required input').each(function() {
    if ($(this).val() == '') {           
      $(this).addClass('highlight');
    }
  });

  if ($('.required input.highlight').size() > 0) {
    alert("Please fill in all the required fields (indicated by *)");
    return false;
  }
}

【讨论】：

恕我直言，这很糟糕，因为每次发现必填字段为空白时，它都会提醒最终用户。

【解决方案6】：

如果

$(".required input")

匹配多个元素，则

$(".required input").val() == ''

可能不会达到您的预期。

【讨论】：

【解决方案7】：

你不能像那样引用所有表单输入的值。

var valid = true;
$('.required input').each(function(){
   if( $(this).val() == '' ){
      valid = false;
      $(this).addClass('highlight');
   }
});

顺便说一句，forms plugin 会为你做这件事。

【讨论】：

【解决方案8】：

输入的名称或 id 在这种情况下使用输入的 id

HTML：

<input type="text" id="id"... />

查询：

if (!$("#id").val()) {
   do something...
}

【讨论】：

【解决方案9】：

此代码使用选择列表和复选框等获取所有表单字段。

var save_prms = $("form").serializeArray();
    $(save_prms).each(function( index, element ) {
        alert(element.name);
        alert(element.val);
    });

【讨论】：