Question

更新：

我发现以下内容允许我提交表单。差异似乎是“其他”部分，特别是返回'“true”'似乎使提交发生。如果我以任何方式改变，我无法提交。但是，如果我将其留在其中，则不能正确捕获错误并阻止表单提交。对此有何建议？

新JS：

$(document).ready(function () { 
$('#form-validate').validate(); {debug: false}    
$("[name^=customfields]").each(function(){
    $(this).rules("add", {
        remote: {
            type: "GET",
            url: "/xpath-evaluator.xqy",
            dataType: "json",
            dataFilter: function(data) {
                var json = JSON.parse(data);
                if (json.status === 'false') {
                    return "\"" + json.error.split(')')[1] + "\"";

                }
                else {return '"true"';}
            }
        }
    });
});
});

原始问题：

我需要多个字段来验证远程源。我正在使用下面的代码完美验证。

我坚持的观点是，当字段有效时，表单不会提交。

我已经尝试了很多建议，因为我可以在这里找到SO并通过搜索但没有任何运气。提交按钮根本不做任何事情，只是将光标放回到按下时验证的第一个字段。

我猜我有语法错误或遗忘了什么。我已经尝试添加一个submitHandler，但这并没有帮助，也没有将我的提交按钮的名称更改为提交以外的其他内容。如果有人能在这里指出我的错误并让我走上正轨，那将非常感激。

$(document).ready(function () { 
$('#form-validate').validate();  
$("[name^=customfields]").each(function () {
    $(this).rules("add", {
        remote: {
            type: "POST",
            url: "/xpath-evaluator.xqy",
            dataFilter: function(data) {
                var json = JSON.parse(data);
                if (json.status === 'false') {
                    return "\"" + json.error + "\"";
                }
                else{
                    return "\"" + " " + "\"";
                }
            }
        },
        debug: false
    });
});

}）;

以下是表格：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="content-style-type" content="text/css"/>
    <link rel="shortcut icon" href="/img/APFavicon.png"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link href="/css/bootstrap.css" rel="stylesheet"/>
    <link href="/css/bootstrap-responsive.css" rel="stylesheet"/>
    <link href="/css/docs.css" rel="stylesheet"/>
    <link href="/css/prettify.css" rel="stylesheet"/>
</head>
<body>
    <form class="navbar-search pull-left form-inline" action="process-form.xqy" id="form-validate">
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="input01">Fields:</label>
                <div class="controls">
                    <label class="checkbox inline">Custom XPath: </label>
                    <br/>
                    <div class="controls">
                        <label class="inline">Custom Field 1 </label><input type="text" name="customfields.1" class="span6 input-large"/>
                    </div>
                    <div class="controls">
                        <label class="inline">Custom Field 2 </label><input type="text" name="customfields.2" class="span6 input-large"/>
                    </div>
                    <div class="controls">
                        <label class="inline">Custom Field 3 </label><input type="text" name="customfields.3" class="span6 input-large"/>
                    </div>
                    <div class="controls">
                        <label class="inline">Custom Field 4 </label><input type="text" name="customfields.4" class="span6 input-large"/>
                    </div>
                    <div class="controls">
                        <label class="inline">Custom Field 5 </label><input type="text" name="customfields.5" class="span6 input-large"/>
                    </div>
                </div>
            </div>   
            <div class="form-actions">
                <button name="newname" type="submit" class="btn btn-primary">Submit</button>
            </div>                
        </fieldset>
    </form>
    <script type="text/javascript" src="/js/jquery-latest.js"></script>
    <script type="text/javascript" src="/js/jquery-validation/dist/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/js/xpath-validate.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/force-page-refresh-onBack.js"></script>

</body>
</html>

Answer 1

通过使用jQuery 1.9.1和jQuery Validate 1.13.0（使用Microsoft的jQuery验证CDN - 源http://jqueryvalidation.org），在包含METHOD =＆＃34; get＆＃34;归因于表单，也需要＆＃39;每个领域。

验证和表单提交工作 - 工作示例 http://jsfiddle.net/45Ju5/

<form class="navbar-search pull-left form-inline" action="process-form.xqy" id="form-validate" method="get">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="input01">Fields:</label>
            <div class="controls">
                <label class="checkbox inline">Custom XPath: </label>
                <br/>
                <div class="controls">
                    <label class="inline">Custom Field 1 </label><input type="text" name="customfields.1" class="span6 input-large" required />
                </div>
                <div class="controls">
                    <label class="inline">Custom Field 2 </label><input type="text" name="customfields.2" class="span6 input-large" required />
                </div>
                <div class="controls">
                    <label class="inline">Custom Field 3 </label><input type="text" name="customfields.3" class="span6 input-large" required />
                </div>
                <div class="controls">
                    <label class="inline">Custom Field 4 </label><input type="text" name="customfields.4" class="span6 input-large" required />
                </div>
                <div class="controls">
                    <label class="inline">Custom Field 5 </label><input type="text" name="customfields.5" class="span6 input-large" required />
                </div>
            </div>
        </div>   
        <div class="form-actions">
            <button name="newname" type="submit" class="btn btn-primary">Submit</button>
        </div>                
    </fieldset>
</form>

Answer 2

我仍然不确定我是否完全正确地完成了这项工作，但我已经将此工作用于我们的目的并且不会产生任何错误，也许这可以帮助将来的某个人。这是有效的JavaScript。

正如你将看到你是否比较上面所述，如果事情是有效的，我将返回一个布尔值为true，而不是尝试从我的响应中解析json.status，我正在解析json.valid这是什么原来是在标题中。这对每个人来说可能都不一样，所以我会仔细检查。需要进行这两项更改才能使验证工作并在表单中循环多个字段并允许其提交。

$('#form-validate').validate(); 
$("[name^=customfields]").each(function(){
    $(this).rules("add", {
        remote: {
            type: "GET",
            url: "/xpath-evaluator.xqy",
            dataType: "json",
            dataFilter: function(data) {
                var json = JSON.parse(data);
                if (json.valid != false) {
                    return true;
                }
                else {return "\"" + json.error.split(')')[1] + "\"";}
            }
        }
    });
});

JQuery表单验证工作但表单不会提交

2 个答案: