Question

更新： 这是我可怕的jQuery代码：JSFiddle

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

我想简化我的代码。

我有两个表单，但一个可以同时显示一个：form_devis和form_request。

如何编写：如果form_request是可见的，那么每个字段都有类.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;

});

Answer 1

更新： jsfiddle上的原始示例现已修复并正常工作：http://jsfiddle.net/akhikhl/EYV2k/

以下是解决方案：

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检查表单上的所有文本输入元素
检查“required”类是否被移动到validateFormInput，因为它与正在检查的规则紧密耦合（可能还有其他规则和其他类，所有它们都应该是validateFormInput的实现细节）。
toggleClass简化了代码，因此无需单独调用addClass和removeClass。
两个div“form-demande”和“form-devis”提供了class =“panel”以简化代码。

Answer 2

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

http://jqueryvalidation.org/

Answer 3

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

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

其他所有内容似乎都在您的代码中here

您也可以只用$(this).val()==''替换!$(this).val()，也可以使用 $.trim从字符串的开头和结尾删除空格。

Answer 4

我评论了代码的所有编辑内容。我认为这是你能从中得到的全部。

由于Ohgodwhy所述事件处理程序不应在each中使用，因为您为单个选择器创建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");
        }
    });
  }
});

Answer 5

快速而肮脏的尝试

我将葡萄酒与每个环完全分开，因为我觉得它更有意义

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

和更新

Answer 6

另一种变体

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

如何简化我的代码？

6 个答案: