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

试一试。

EDIT 移动了警报，这样用户就不会因为警报消息而被吹走，很好地抓住了。

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

Answer 4

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

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

因为您的选择器正在查找.required

的所有输入儿童

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

Answer 6

如果

$(".required input")

匹配多个元素，然后

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

可能不会做你期望的事。

Answer 7

您无法像这样引用所有表单输入的值。

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

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

Answer 8

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

HTML：

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

JQUERY：

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

Answer 9

此代码获取所有表单字段选择列表＆amp;复选框等。

https://[PROJECT_ID].firebaseio-demo.com/users/jack/name.json?access_token=<TOKEN>

检查提交时输入是否为空

9 个答案: