Question

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

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

长话短说，我知道如何检测字段中的更改，但是当字段不在数据库中时，如何检测（并阻止提交表单）？我正在考虑的两种情况是，如果存在自动完成库存（“ibm”）并且用户输入“ib”（完全完成之前）或“ibmm”（自动完成之后）。

是否有一种jquery-ish方法可以检测某个字段是否未通过自动完成功能完全解析？

有什么建议吗？

更新：根据要求，这是我的自动填充代码（基本上只是在搜索框中获取值并提交到名为'autocomplete'的网址）：

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

Answer 1

将表单加载按钮作为禁用。当您填写表单时，您有一个运行的标志（class = validation）来在表单准备好时通知，然后您可以启用该按钮。

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

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

只要在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/

Answer 2

您可以在自动填充字段上使用放在“onchange”事件上的ajax请求，该事件将检查特定值是否在db中，如果需要，将通知用户有关错误而不提交表单

如果表单没有自动完成，有没有办法阻止提交表单？

2 个答案: