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 回答