Question

我的表单中有两个输入。第一个输入可以在ajax函数之前验证。第二个输入无法验证。第二个输入来自使用ajax的页面，提交按钮也来自使用ajax的页面。我需要使用ajax验证来自页面的第二个输入。此外，来自页面的提交按钮不起作用。请帮帮我。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#form").submit(function(){   
          if ($('#Name1').val().length<3) {
            alert ("please enter your first names");
            $('#Name1').focus();
            return false;
          }
          $.ajax({
            url: "result.php",
            method: "GET" // Either get or post
          }).done(function(response) {
            var splitted = response.split("|"); // RESULT
            $("#Div1").html(splitted[0]); // The first name
            $("#Div2").html(splitted[1]); // The first name
          });
          return (false);

          if ($('#Name2').val().length<3) {
            alert ("please enter your second names");
            $('#Name2').focus();
            return false;
          }
        });
      });
    </script>
  </head>
  <body>
    <form id="form" action="Page.php">
      <div style="float:left;">
        <b>Name1:</b>
      </div>
      <input id="Name1" type="text">
      <br><br><br><br>
      <div style="clear:both;">
        <div style="float:left;">
          <b>Name2:</b>
        </div>
        <div id="Div1" style="float:left;">
        </div>
        <br><br><br>
        <div style="clear:both;">
          <div id="Div2">
            <button>First Event</button>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>

这是result.php

<input type="text" id="Name2">  
    i need to validate this input. | <button>Second Event</button>

Answer 1

有几种方法可以做到这一点，但是因为我在手机上，我无法给你一个详细的例子。

我建议你研究的是将AJAX请求作为JSON数据发送到PHP文件，然后可以验证PHP文件中的JSON数据并相应地向前端返回响应。

在PHP文件中，您可以返回任何值作为响应，这意味着如果您回应＆＃34;成功＆＃34;或＆＃34; true＆＃34;，您可以查看数据是否是您希望从用户那里收到的数据。

我强烈建议在后端尽可能多地进行验证。这是一个很好的习惯，因为任何东西都可以在网站的前端被操纵。

Answer 2

此代码效果很好。我已经解决了自己。

<html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
          $(document).ready(function(){
            $("#form").submit(function(){  

              if ($('#Name1').val().length<3) {
                alert ("please enter your first names");
                $('#Name1').focus();
                return false;
              }

              if ($('#hidden').val().length<3) {
                  $.ajax({
                    url: "result.php",
                    method: "GET" // Either get or post
                        }).done(function(response) {
                        var splitted = response.split("|"); // RESULT
                            $("#Div1").html(splitted[0]); // The first name
                            $("#Div2").html(splitted[1]); // The first name

                        });
                    //alert ("please verify");
                     return false;
                    }

                if ($('#Name2').val().length<3) {
                    alert ("please enter your second names");
                    $('#Name2').focus();
                     return false;
                }


            });
          });
        </script>
      </head>
      <body>
        <form id="form" action="Page.php">
          <div style="float:left;">
            <b>Name1:</b>
          </div>
          <input id="Name1" type="text">
          <br><br><br><br>
          <div style="clear:both;">
            <div style="float:left;">
              <b>Name2:</b>
            </div>
            <div id="Div1" style="float:left;">
              <input id="hidden" type="hidden">
            </div>
            <br><br><br>
            <div style="clear:both;">
              <div id="Div2">
                <button>First Event</button>
              </div>
            </div>
          </div>
        </form>
      </body>
    </html>

result.php

<input type="hidden" id="hidden" value="something"> <input type="text" id="Name2"> | <input id="button" type="submit" value="Second Event">

如何使用jquery

2 个答案: