检查提交时输入是否为空

Question

我一直在寻找解决方案,但似乎找不到任何适合我的例子.这是我到目前为止所得到的:

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

出于某种原因,当我提交表单时没有填写任何必填字段(有两个),那么它可以工作,但如果填写了其中一个,则不会.

有什么想法吗？

谢谢

OSU

Answer 1

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

这将循环遍历表单中所有标记所需的输入(根据您的选择器).如果找到值为''的那个,则将submit函数设置为返回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;
});

Answer 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;
  }
} 

试一试.

编辑移动警报,以便用户不会因为警报消息而被他们的脸弄得一团糟.