表单附加值到 URL

Question

我有一份由 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 这样的 url 它就变成了 http://localhost/Home/Index/?UserName=blah&Password=blah

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

Answer 1

您显然没有正确包含和初始化 jQuery 验证插件（不在您的 OP 中），因此您只是将表单提交到 [=13] 中的 URL =] 属性.

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

这与 jQuery 验证插件无关。

就此而言...

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 验证插件，您必须在考虑验证的任何字段上具有 name 属性。

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

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

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

删除您对 .validate() 的调用以验证这一点。如果没有任何变化，那么您就会知道它要么被 ASP 的内置非侵入式验证覆盖，要么一开始就被完全破坏了。

表单附加值到 URL

Form appending values to URL

asp.net

asp.net-mvc

jquery

jquery-validate