将值附加到 URL 的表单答案

【问题标题】：Form appending values to URL将值附加到 URL 的表单
【发布时间】：2016-07-13 06:08:46
【问题描述】：

我有一个由 JQuery 提交的表单。有时当表单提交失败时，表单内的值会自动作为查询字符串附加到 url。我进行了很多搜索，但无法找到有关这种奇怪行为的任何信息。这是发生的事情的一个例子。

有一个包含两个字段的表单

$("#MyForm").validate({
        rules: {
            "UserName": {
                required: true
            },
            "Password": {
                required: true,
                minlength: 8
            }
        },
        messages: {
            "UserName": {
                required: "UserName is required"
            },
            "Password": {
                required: "Password is required"
            }
        },


        submitHandler: function () {
         var userName = $("#UserName").val();
         var password = $("#Password").val();
         var myObject = {UserName:userName, Password: password}  
          $.post('/MyAuthenticationUrl',myObject,function(){
            //Redirect to Home page on success
          });
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="/MyUrl"/>
  <input type="text" id="UserName" />
  <input type="password" id="Password"/>
  <input type="submit" id="Submit"/>
<form>

对于表单验证和提交，我使用来自JqueryValidation.org 的 JqueryValidation 插件

有时当我点击提交时，用户名和密码会附加到查询字符串中。

所以如果你有一个像http://localhost/Home/Index 这样的网址，它就会变成 http://localhost/Home/Index/?UserName=blah&Password=blah

我怀疑它与 JqueryValidation 插件有关，但我无法在问题页面 here 中找到任何相关内容

【问题讨论】：

尝试将method="post" 添加到您的表单标签中。
你应该在控制台失败时检查它，我想你应该在那里得到错误消息
@GentlemanMax 但是如果我是正确的，插件会阻止表单提交的默认行为，使用 ajax 方法
@A.Wolff，是的。但是当插件失败时，表单会正常提交。插件失败的原因可能是一个单独的问题。
@GentlemanMax 如果插件失败意味着 OP 的代码中有任何错误，那么是的。我认为 OP 应该问一下他的插件为什么会失败

标签： jquery asp.net asp.net-mvc jquery-validate

【解决方案1】：

您显然没有正确包含和初始化 jQuery Validate 插件（不在您的 OP 中），因此您只需将表单提交到 action 属性中的 URL。

报告的问题描述了在form 标记中没有method="post" 属性时（非ajax）表单提交的默认行为...默认情况下，查询字符串会附加到URL。

这与 jQuery Validate 插件无关。

就目前而言...

submitHandler: function () {
    var userName = $("#UserName").val();
    var password = $("#Password").val();
    var myObject = {UserName:userName, Password: password}  
    $.post('/MyAuthenticationUrl',myObject,function(){
        //Redirect to Home page on success
    });
}

submitHandler 没有发挥作用，因为插件已损坏（不包括在内，JavaScript 错误等）。但是，您的意图似乎是使用 ajax .post() 提交表单和 "Redirect to Home page on success"。我不明白这一点。如果您想重定向到另一个 URL，那么您不需要 ajax... 只需使用 action 属性的 URL，表单将自动提交并重定向到该 URL。完全删除submitHandler 将恢复到此默认行为。

您的标记...

<input type="text" id="UserName" />
<input type="password" id="Password"/>

要使用 jQuery Validate 插件，您必须在任何考虑验证的字段上都有一个name 属性。

<input type="text" name="UserName" id="UserName" />
<input type="password" name="Password" id="Password"/>

对此没有例外或解决方法；这就是插件在内部跟踪各种元素的方式。

最后，您的问题已用asp.net 和asp.net-mvc 标记。在 ASP 中，jQuery Validate 插件由包含的 Unobtrusive Validation 插件自动初始化。如果是这种情况，那么您不能直接调用 .validate() 方法，因为 Unobtrusive Validation 插件会根据 HTML 标记中的数据属性自动构造和调用 .validate()。 jQuery Validate 插件将只使用.validate() 的第一个实例，并完全忽略任何后续调用。

删除您对.validate() 的呼叫以验证这一点。如果没有任何变化，那么您就会知道它被 ASP 的内置 Unobtrusive Validation 覆盖，或者它一开始就被完全破坏了。

【讨论】：