0

如果字段无效并且如果字段有效，则我的代码基本上会添加一个类错误，则删除错误类并正常提交表单。

我无法为我创建的表单验证代码找出两个小错误。

下面列出的错误：

1) 如果您在一个字段中输入正确的内容，然后单击提交，则错误类别的长度不会在第一次提交单击时更新。更新长度需要两次提交点击。（查看console.log）

2）如果您更改输入字段的内容并单击提交（一切正常，错误类已删除）但如果您决定删除更新的文本并将该字段留空，则不会重新应用错误类。

如果我能得到一些帮助来解决这个问题，那就太好了。

如果有任何不清楚的地方，请告诉我。

提前致谢： JSFIDDLE

$('form.requiredFields').submit(function(e) {

    var req = $(this).find('.req'),
        validateEmail = function(email) {
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        };

    req.each(function() {
        var $this = $(this),
            defaultVal = $this.prop('defaultValue'); //cache default val

        //checks for validation errors
       if (  ( $this.hasClass('email') && !validateEmail( $this.val() ) ) ||
             ( defaultVal === $this.val() || $this.val() === '' || $this.val().length < 3 )
       ) 
       {
          $this.addClass('error');
       } else {
          $this.removeClass('error req');
       }

    });

    console.log(req.length);

    if ( req.length === 0 ) {
        return true;
    } else {
        return false;
    }

});
4

3 回答 3

2

就像 dc5 对 #2 所说的那样，不要删除 req 类。

对于 #1 - 您在删除之前查找错误 (.req)。

看到这个工作小提琴。这是您的代码如何工作的示例，但也许您可以找到更清洁的解决方案。

$('form.requiredFields').submit(function(e) {

    var req = $(this).find('.req'), errorCheck = 0,
        validateEmail = function(email) {
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        };

    req.each(function() {
        var $this = $(this),
            defaultVal = $this.prop('defaultValue'); //cache default val

        //checks for validation errors
       if (  ( $this.hasClass('email') && !validateEmail( $this.val() ) ) ||
             ( defaultVal === $this.val() || $this.val() === '' || $this.val().length < 3 )
       ) 
       {
          $this.addClass('error');
       } else {
          $this.removeClass('error');
       }

    });

    errorCheck = $(this).find('.error');
    console.log(errorCheck.length);

    if ( errorCheck.length === 0 ) {
        return true;
    } else {
        return false;
    }

});
于 2013-07-23T22:29:32.923 回答
1

对于＃2，您在清除错误时正在移动“req”类和“error”类。下次通过调用时，不再通过您的选择器找到输入$(this).find('.req')

对于＃1 - 我不明白你所描述的问题。

于 2013-07-23T22:24:04.810 回答
0

我让你更容易，实际上你的代码是一团糟，

这是一个小提琴：

Jsfiddle 验证演示

代码：

$('#submit_form').click(function() {
    var flag = 0;
    var count = 0,
        total = $(".req").length;
    var validateEmail = function(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }      
    $('.req').each(function(){
        count++; 
        if($(this).attr('id')=='email') {
            if(!validateEmail($(this).val())){ $(this).addClass('error');  flag = 1; } 
                else { $(this).removeClass('error'); } }

        if($(this).attr('id')=='name') {
            if($(this).val().length < 3){ $(this).addClass('error');  flag = 1; } 
                else { $(this).removeClass('error'); } }

        if($(this).attr('id')=='com') {
            if($(this).val().length < 3&&$(this).val()!=''){ $(this).addClass('error');  flag = 1; } 
            else { $(this).removeClass('error'); } }

        if ( total==count&&flag<1) { alert('submit'); }
    });
});

验证规则：

  1. 名称 - 必须大于 2。
  2. 电子邮件 - 模式匹配功能为真。
  3. 评论 - 如果输入，必须大于 2 个字符（只是为了了解如何完成）。

如果此示例不清楚或您需要更多帮助，请不要犹豫……我很无聊。

于 2013-07-23T22:59:22.420 回答