没有插件的jquery自定义验证脚本?

时间:2012-10-02 22:42:23

标签: javascript jquery jquery-selectors

我曾经使用过jquery验证插件,但由于缺少这个带有wysiwyg插件的插件,我写了一个简单的脚本来验证我的表单

我试着这样做

function validateArticle(formData, jqForm, options) { 
  $('#errors').empty();
  if ($('#editor').val() == 0) { 
    $('#errors').show();
    $('#errors').append('<li>please enter your article body</li>');
    return false; 
  } 
  if ($('#ArticleTitle').val() == 0) { 
    $('#errors').show();
    $('#errors').append('<li>please enter your article title</li>');
    return false; 
  }
  $('#errors').hide();
  return true ;
}

我在验证表单时发现1个问题,它逐字段验证它,因此错误消息不会立即出现

我尝试做类似

的事情
var errors = [];
function validateArticle(formData, jqForm, options) { 
  $('#errors').empty();
  if ($('#editor').val() == 0) { 
    errors.push('<li>please enter your article body</li>');
    var invalid = 1 ;
    return false; 
  } 
  if ($('#ArticleTitle').val() == 0) { 
    errors.push('<li>please enter your article title</li>');
    var invalid = 1 ;
    return false; 
  }
  if(invalid == 1){
    $.each(errors , function(i, val) { 
      $('#errors').append(errors [i]); 
    });
  }

  $('#errors').hide();
  return true ;
}

我试图将错误作为数组元素推送,并在无效的情况下循环遍历它们 这一个不起作用吗?

有什么方法可以让它发挥作用吗?

1 个答案:

答案 0 :(得分:2)

if ($('#editor').val() == 0)   // This is checking if value is 0

这没有意义.. 试试

if ($('#editor').val() == '') //Instead check for empty string

修改 此外,你似乎最终隐藏了错误的div。

 $('#errors').hide();

尝试使用此代码

$('#validate').on('click', function() {
    var errors = [];
    var html = '<ul>' ;
    valid = true;
    $('#errors').empty();
    if ($('#editor').val() == '') {
        errors.push('<li>please enter your article body</li>');
        valid = false;
    }
    if ($('#ArticleTitle').val() == '') {
        errors.push('<li>please enter your article title</li>');
         valid = false;
    }
    if (!valid) {
        html += errors.join('') + '</ul>' 
            $('#errors').append(html);

    }
    else{
        $('#errors').hide();
    }
    return valid;
});​

DEMO