如果表单没有自动完成，有没有办法阻止提交表单？ [英] Is there a way to prevent a form from being submitted if it is not auto completed?
问题描述
我正在学习jquery，它真棒！它很容易做复杂的事情，但我不确定如果自动完成失败，如何阻止某人提交表单（或警告他们）。
I'm learning jquery and its awesome! Its very easy to do complex stuff but I'm unsure how to prevent someone from submitting a form(or warning them) if a autocomplete fails.
我的网站上有一个表格可以自动填充我数据库中的现有数据，当他们提交时，会提供有关该条目的信息。如果他们添加了不在数据库中的内容，那么我的服务器会将它们弹回到表单页面并让他们知道错误，但我想在填写表单时（在他们提交表单之前）做一些事情来警告他们。
I have a form on my site that gets autocompleted with existing data from my database and when they submit it provides info on that entry. If they add something thats not in the database then my server will bounce them back to the form page and let them know of the error but I want to do something to warn them while they are filling out the form(before they submit the form).
长话短说，我知道如何检测字段中的更改但是当字段不在数据库中时如何检测（并阻止提交表单）？我正在考虑的两种情况是，如果存在自动完成库存（ibm）并且用户输入ib（完全完成之前）或ibmm（自动完成之后）。
Long story short, I know how to detect changes in the field but how can I detect(and prevent submission of form) when they the field is not in the database? The two cases I'm thinking about is if there's a autocomplete for stock("ibm') and the user either types "ib"(before it fully completes) or "ibmm"(after it autocompleted).
是否有一种jquery-ish方法可以检测某个字段是否未通过自动完成功能完全解析？
Is there a jquery-ish easy way to detect if a field has not been fully resolved by autocomplete?
有任何建议吗？
更新：
根据要求，这是我的自动填充代码（基本上只是在搜索框中取值并提交到名为'autocomplete'的网址）：
update: As requested, here's my autocomplete code(basically just takes value in the search box and submits to a url called '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>
推荐答案
将表单加载按钮作为禁用。当您填写表单时，您有一个运行的标记（class = validation）来在表单准备好时通知，然后您可以启用该按钮。
Have the form loaded with the button as disabled. As you are filling up the form, you have a running tally of flags (class=validation) to notify when the form is ready, then you can enable the button.
如果你已经知道如果不是所有的信息都准备好就会失败，那么有一个可行的按钮试图调用服务器是没有意义的。
There is no sense in having a workable button that will attempt to call the server if you already know that it should fail if not all the information is ready.
如果你用文本填满所有三个框，底部将工作。您可以通过让每个带有类的文本框使用jquery中的appendTo（）以红色字体附加文本required来表示控件。
The example in the bottom will work if you fill up all three boxes with text. You can signify controls by having each textbox with a class append text "required" in red font using the appendTo() in jquery.
只要有类验证在html元素上，它将是必需的，因此当我们输入数据时，它将删除那些验证类：
As long as there is a class validation on the html element, it will be required, so as we are entering data, it will remove those validation classes:
<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/
这篇关于如果表单没有自动完成，有没有办法阻止提交表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
