Question

我想知道是否有人可以帮助我使用这个jQuery表单验证脚本。

我希望验证在点击提交按钮之前是否填充了某些输入字段。我的validateFileInput函数

中的第二个条件似乎有问题

/* Validate File Size */
var validateFileInput = function() {
  if ($('#fileField')[0].files.length > 0 || $('#defImage').val().length > 0 )   {
    return true;
   }
 }                   

var validate = function(){
  if ($('#campaign_name').val().length   >   0   &&
      $('#headline_area').val().length  >   0   &&
      $('#description_area').val().length  >   0 &&
      validateFileInput()  ) {
      $("input[type=submit]").prop("disabled", false);
  }
  else {
    $("input[type=submit]").prop("disabled", true);
  }
}

$(document).ready(function () {
 validate();
  $('#new_campaign').on( 'change', ':input', function (e){
    e.preventDefault();
    validate();
    console.log('I just validated');   
 });
});

所以似乎这条线是问题，因为当条件满足时，提交按钮仍然无法点击

$('#defImage').val().length > 0

如果我在添加文件后在控制台中运行它，则输出为true，所以我不确定为什么这不起作用。

任何帮助表示赞赏

修改

第二个文件字段的html如此

<a data-remote="true" data-target=".our-images" data-toggle="modal" href="/default_images" id="image-default-button">Use one of ours</a>   
<input id="defImage" name="campaign[default_image_id]" type="hidden" />

我正在使用Ajax请求来获取图像，然后将图像的id传递给隐藏字段#defImage，然后它会给我

<input id="defImage" name="campaign[default_image_id]" type="hidden" value="3" />

所以也许我正在处理这个错误的验证？

我创建了一个jsfiddle，但是当输入类型设置为file ...

时，这一切都有效

Answer 1

如果有文件，您的函数会返回true，但当条件为undefined时，您的函数会返回false，所以它会失败。

尝试更改

var validateFileInput = function() {
  if ($('#fileField')[0].files.length > 0 || $('#defImage').val().length > 0 )   {
    return true;
   }
 }

到：

var validateFileInput = function() {
  return ($('#fileField')[0].files.length > 0 || $('#defImage').val().length > 0 );
 }

更改表单验证事件

1 个答案: