Question

我在上传之前创建了这个Javascript函数来验证文件扩展名：

function validateFileExtension(field, extensions){
  file_extension = field.val().split('.').pop().toLowerCase();
  if ($.inArray(file_extension,extensions) == -1){
    return false;
  }
  return true;
}

这就是我调用函数的方式：

  /* Displays loading message after user submits a form */
  $("form.show-loading").submit(function(e){

    /* Validates spreadsheet extension */
    if ($(this).hasClass("file-upload")){
      field = $("input.spreadsheet");
      if (!validateFileExtension(field,['xls'])){
        e.preventDefault();
        alert('Invalid file extension. Allowed: .xls');
        return;
      }
    }

    //Displays loading spin
    $("div.panel-body").html(
      "<div class='loading'>"+
        "<img src='"+base_url+"/assets/images/loading.gif' class='loading'><p>Loading... Please wait</p>"+
      "</div>");
  });

});

一切正常。我只是想以另一种方式显示错误消息而不是恼人的警报。

我可以像在HTML5表单元素中看到的那些验证消息气泡一样显示它吗？

例如：当输入中包含“＆＃39; required＆＃39;属性和浏览器突出显示该消息气泡的字段。

Answer 1

以下是Bootstrap的基本示例。

＆＃13;

$(document).ready(function() {
  $('#validate').click(function() {
    $('#text').toggleClass('has-error');
    $('#text').parent().toggleClass('has-error');
  });
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="form-group">
  <input id="text" class="form-control" type="text" placeholder="Enter something here..." />
</div>
<input id="validate" type="button" value="Toggle" />

＆＃13;

如何使用jQuery以HTML5样式显示自定义验证消息？

1 个答案: