Jquery 如何简化我的代码？

更新： 下面是我可怕的jQuery代码：

注意： 只有“联系人”按钮包含真实表单

我想简化我的代码

我有两个表格，但其中一个可以同时显示：设计表格和请求表格

如何编写：如果form_请求可见，则每个请求的字段都带有class.required，并且不是空的，所以请执行{}。先谢谢你

    .error-image {background: #c3c6c7 url(../images/erreur-form.png) no-repeat 98% center;}

$btnValidate.click(function() {
    valid = true;

    if ($('#form_request').is(':visible')) {

        $('#form_request').find('.required').each(function() {
            if($(this).val() == "" || $(this).val() == " ") {
                $(this).addClass("error-image");
                $ErrMessGen.fadeIn(500);
                valid = false;
            }
            else {
                $(this).removeClass("error-image");
            }

            $(this).keyup(function() {
                if(!$(this).val() == '') {
                $(this).removeClass("error-image");
                }           
            });

            $(this).focusout(function() {
                if($(this).val() == '') {
                $(this).addClass("error-image");
                }           
            });
        });

    }

    return valid;

});

---

改进代码的最简单方法是使用jquery验证插件，它将为您处理空字符串检查等，并内置电子邮件检查等

---

我认为您必须在代码中添加以下内容，以防止默认情况下提交表单：

$('#btnValidate').click(function(e) {
    e.preventDefault();
.......
});

在你的代码中，所有其他的东西似乎都在工作

您还可以简单地用

替换
$（this）.val（）=''
$（this）.val（）

，您也可以使用

---

$.trim

删除字符串开头和结尾的空白。

我对代码的所有编辑都进行了注释。我想这就是你能从中得到的一切

正如

Ohgodwhy

所述，事件处理程序不应在每个

中使用，因为您为单个选择器创建了X个事件处理程序，而不是一次为所有选择器创建一个事件处理程序（内存使用）

更新了我的代码并使其正常工作

$btnValidate.click(function() {
  valid = true;
  var $formRequest = $('#form_request'); // local variable to find ID only once 
  var $req = $formRequest.find('.required');
  if ( $formRequest.is(':visible') ) {
    $req
    .each(function() {
        if( ! $.trim( $(this).val().length ) ) {  // trim value to get only one IF and use length instead of value&type comparison
            $(this).addClass("error-image");
            valid = false;
        } else {
            $(this).removeClass("error-image");
        }
    })
    .bind({ // alternative method of writing events from about jQuery 1.7. 
        keyup: function(){
            ( $(this).val().length ) && $(this).removeClass("error-image"); // Javascript hack for IFs without ELSEs
        },
        blur: function(){
            ( ! $(this).val().length ) && $(this).addClass("error-image");
        }
    });
  }
});

这是通过快速和肮脏的尝试

我将binings与each循环完全分离，因为我认为这更有意义

$btnValidate.click(function() {
    valid = true;
    $('#form_request:visible').find('.required').each(function() {
        if(!$(this).val().trim()) {
            $(this).addClass("error-image");
            valid = false;
        }
        else {
            $(this).removeClass("error-image");
        }
    });
});
$('.required').keyup(function() {
    if($(this).val().trim()) {
        $(this).removeClass("error-image");
        }           
    }).focusout(function() {
    if(!$(this).val().trim()) {
    $(this).addClass("error-image");
    }           
});

更新
更新：JSFIDLE上的原始示例现在已修复并运行：

以下是解决方案：

function validateFormInput(elem) {
  var validElem = !$(elem).hasClass('required') || $(elem).val().trim() != ''
  $(elem).toggleClass("error-image", !validElem);
  if(!validElem)
    $ErrMessGen.fadeIn(500);
  return validElem;
}

function validateForm() {
    var formValid = true;
    $('div.panel:visible input').each(function() {             
        if(!validateFormInput(this))
            formValid = false;
    });
    if(formValid)
        $ErrMessGen.hide();
    return formValid;
}

$("div.panel input").on("keyup focusout", validateForm);

$btnValCt.on(Modernizr.touch ? 'tap' : 'click', validateForm);

说明：


validateFormInput检查单个输入元素的有效性

validateForm检查表单上的所有文本输入元素

check for“required”类被移动到validateFormInput，因为它与被检查的规则紧密耦合（可能有其他规则和其他类，所有这些都应该成为validateFormInput的实现细节）

toggleClass简化了代码，所以不需要分别调用addClass和removeClass

为简化代码，class=“panel”提供了两个div“form demande”和“form design”

又是一种变体

$btnValidate.click(function() {
    valid = true;
    $('#form_request:visible .required').each(function() {
        var $this = $(this);
        valid = $this.val().trim();
        $this.togleClass("error-image", !valid);
    }
}

$('#form_request').on("keyup focusout",".required",function(){
    var $this = $(this);
    $this.toggleClass("error-image", !$this.val().trim());
});

如果（！$（this）.val（）=''）是错误的，因为
的优先级高于
=
。如果（this.value）{…}
您不应该在
.each（）
函数中绑定事件处理程序，则它应该是
。您忘记了
有效的
变量谢谢仔细阅读。我介绍了变量formValid，还更新了JSFIDLE上的示例。非常感谢您的解释！我用JSFIDLE链接更新了我的问题。事实上，我使用modernizr+hammer作为触摸设备，我对$（“#btnValidate”）有一个问题；现在，检查一下：-所有的东西现在都在工作。我更新了上面的解释。哇，太好了，非常感谢。与之相反，按钮不再正常工作。当我再次单击表单按钮时，与之对应的表单不会消失并保持灰色：-/谢谢！我更新了我的问题，因为使用您的代码表单总是经过验证的。谢谢！我更新了我的问题。我试过你的代码，但没法用。我不擅长jQuery。可能是因为我忘记了代码中的“returnvalid；”。我更新了它。