按下按钮以验证多个字段答案

【问题标题】：Button press to validate multiple fields按下按钮以验证多个字段
【发布时间】：2016-11-16 00:09:52
【问题描述】：

我正在做一个 MVC 应用程序，我需要使用一个按钮来验证两个字段。

目前，我有两个按钮和两个 javascript 函数，一个两个分别验证每个字段。

功能一：

<button onclick="callApi()" id="userButton">@Resources.Resources.ButtonFind</button>
<div id="user">
<p>@Resources.Resources.UserName:
</p>
</div>
<script type="text/javascript"  id="select_user">
function callApi() {
    var userName = $('#search_employee').val();
    /* call the api */
    $.ajax('OneUserInfo', {
        data: {
            strUserName: userName
        },
        success: function (data, textStatus, jqXHR) {
            //this will happen on success of request
            $('#DataUser').html(data);
        },
        error: function () {
            console.log("error handler when ajax request fails... ");
        },
        dataType: "html",
        cache: false,   //important! especially for IE...
        async: false  //set to false if you want th UI to wait for the ajax call;
    });
}

function GO() {
    location.href = '/Home/NewspaperStatus?name=value';
}

</script>

功能2：

<div id="datePicker">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</div>
<div id="date">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>@Resources.Resources.Date: <input type="text" id="datepicker"></p>
<script name="select_date" id="select_date">

  $(function () {
      intDate = Date;
      $("#datepicker").datepicker({
          //defaultDate: "+1w",
          changeMonth: true,
          changeYear: true,
          numberOfMonths: 1,
          minDate: "01/01/2008"
      });
      $("button.action").click(function () {
          //console.log(select_date);
          var date = $('#datepicker').val().toString();
          $.ajax('EmployeeDate', {
              data: {
                  strDate: date
              },
              success: function (data, textStatus, jqXHR) {
                  //this will happen on success of request
                  $('#DataUser').html(data);
              },
              error: function () {
                  console.log("error handler when ajax request fails... ");
              },

          });
      });
  });
</script>
<button class="action" type="button" id="dateButton">@Resources.Resources.ButtonFind</button>
<br>

如何编写代码，以便在按下同一个按钮时验证两个字段？

提前致谢。

编辑

谢谢你们。因此，如果我理解正确，我必须这样做：

 <div id="date">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <p>@Resources.Resources.Date: <input type="text" id="datepicker"></p>
 <script name="select_date" id="select_date">

  $(function getInfo() {
      intDate = Date;
      var userName = $('#search_employee').val();
      $("#datepicker").datepicker({
          //defaultDate: "+1w",
          changeMonth: true,
          changeYear: true,
          numberOfMonths: 1,
          minDate: "01/01/2008"
      });
      $("button.action").click(function () {
          //console.log(select_date);
          var date = $('#datepicker').val().toString();
          $.ajax('EmployeeDate', {
              data: {
                  strUserName: userName,
                  strDate: date
              },
              success: function (data, textStatus, jqXHR) {
                  //this will happen on success of request
                  $('#DataUser').html(data);
              },
              error: function () {
                  console.log("error handler when ajax request fails... ");
              },

          });
      });
  });
</script>
<button onclick="getInfo()" id="userButton">@Resources.Resources.ButtonFind</button>
<br>

无论如何我应该做错了，因为我无法执行代码。 “功能未定义”错误。代码上有什么不对吗？谢谢！

【问题讨论】：

这两个函数改变了元素'#DataUser'......如果成功，这个未来的独特功能应该怎么做？
它应该是两个值的组合。现在，两者都单独更改了 dataUser，但如果只有一个按钮，则该按钮应更改它
好吧，我只会做一个 ajax 调用，更改接受请求的控制器......否则，正如您在答案中看到的，您可以使用“promises”进行两个 ajax 调用并打印第二个之后的数据。

标签： javascript html asp.net-mvc validation

【解决方案1】：

有几种方法可以做到这一点。例如，您可以组合/扩展您的数据属性，并从服务器返回哪个属性无效并在 ajax 中处理。但是如果你不能/不想结合你也可以使用 Jquery 承诺功能api.jquery.com/promise。有了这个，当上一个调用成功/失败等时，您可以更好地控制下一步该做什么。

【讨论】：

【解决方案2】：

如何将其更改为一个按钮只有一个功能？

你可以通过在另一个函数中调用一个函数来做到这一点

function callApi() {
   $.ajax({
   success:function(response){
      //  Here you can call the second function 
    }
  })
}

我可以把它改成只有一个功能吗

第二个函数有一个单独的 ajax 调用，您可以使用 jquery when 将两个 ajax 调用链接到一个函数中。此外，您必须在第一个 ajax 成功或执行任何 ajax 调用之前将 datepicker 相关代码放在适当的位置

【讨论】：