2

我正在学习 jquery,它很棒!做复杂的事情很容易,但我不确定如果自动完成失败,如何阻止某人提交表单(或警告他们)。

我的网站上有一个表单,它使用我的数据库中的现有数据自动完成,当他们提交时,它会提供有关该条目的信息。如果他们添加了一些不在数据库中的内容,那么我的服务器会将它们弹回表单页面并让他们知道错误,但我想在他们填写表单时做一些事情来警告他们(在他们提交表单之前) .

长话短说,我知道如何检测字段中的更改,但是当字段不在数据库中时,我如何检测(并防止提交表单)?我正在考虑的两种情况是库存(“ibm”)是否有自动完成功能,并且用户输入“ib”(在它完全完成之前)或“ibmm”(在它自动完成之后)。

是否有一种类似于 jquery 的简单方法来检测字段是否没有被自动完成完全解析?

有什么建议么?

更新:根据要求,这是我的自动完成代码(基本上只是在搜索框中取值并提交到一个名为“自动完成”的网址):

<script>
  $(function() {

    var cache = {},
      lastXhr;
    $( "#global-search-field" ).autocomplete({
      minLength: 2,
      source: function( request, response ) {
      $(".message").empty()
        var term = request.term;
        if ( term in cache ) {
          response( cache[ term ] );
          return;
        }

        lastXhr = $.getJSON( "autocomplete", request, function( data, status, xhr ) {
          cache[ term ] = data;
          if ( xhr === lastXhr ) {
            response( data );
            if ( data == 'no results found'){
              //alert(data);
              //$(".message").empty().append("not found!");
            }
          }
        });
      }
    });

  });
  </script>
4

2 回答 2

2

将带有按钮的表单加载为禁用状态。当您填写表格时,您有一个正在运行的标志 (class=validation) 来通知表格何时准备好,然后您可以启用该按钮。

如果您已经知道如果不是所有信息都准备好它应该会失败,那么有一个可行的按钮将尝试调用服务器是没有意义的。

如果您用文本填充所有三个框,则底部的示例将起作用。您可以通过使用 jquery 中的 appendTo() 让每个带有类的文本框以红色字体附加文本“必需”来表示控件。

只要在 html 元素上有一个类验证,它就会被要求,所以当我们输入数据时,它会删除那些验证类:

<html>
  <head>
 <script src="jquery.js"></script>
 <script type="text/javascript">

    $(document).ready(function(){

        $("input[name^='test']").blur(function(){
             if ($(this).val() != "" && $(this).hasClass("validation")){
                $(this).removeClass("validation");
            }

            var check = $(".validation"); //checks to see if there is any more validation
            if (check.length == 0){
                $("#nowSubmit").prop("disabled", false);
            } else {
                $("#nowSubmit").prop("disabled", true);
            }
        });
    });
  </script>
  </head>
  <body>

<form>
<input id="control1" name="test" type="textbox" class="validation" />
<input id="control2" name="test" type="textbox" class="validation" />
<input id="control3" name="test" type="textbox" class="validation" />

<input id="nowSubmit" type="submit" value="Click Here" disabled="true"/>
</form>
</body>
</html>

这里的工作示例:http: //jsfiddle.net/hSatZ/

于 2012-07-20T01:55:04.850 回答
1

您可以在自动完成字段上使用 ajax 请求放在“onchange”事件上,这将检查特定值是否在 db 中,并在需要时通知用户错误而不提交表单

于 2012-07-20T00:33:03.070 回答